2

我想在 ExtJs4 的文件字段中添加验证，以便用户只能浏览 .png 、 .jpeg 图像文件。我应该怎么做？

 {
     xtype: 'filefield',                                                                         
     id:'photoUpload',                                                                                                                                                 
     buttonOnly:true,
     buttonText: 'Photo'
 }
4

3 回答 3

7

我认为了解文件上传的工作原理很重要，以免将来遇到麻烦...

出于安全原因，以下适用：

  • 除非用户明确单击上传字段，否则浏览器无法访问文件系统。
  • 浏览器对正在上传的文件的访问很少，特别是 - 您的 JS 代码可能能够看到文件名（浏览器必须在字段中显示它），但没有别的（大多数浏览器上的路径本身不正确一）。

上传过程本身发生在以下步骤中：

  • 用户单击上传字段，启动文件选择对话框。
  • 浏览器通过对话框实现对文件系统的访问，允许用户选择文件。
  • OK单击后，浏览器将文件发送到服务器。
  • 服务器将文件放在其temp目录中（按服务器配置）。
  • 上传完成后，将使用文件详细信息调用服务器上的上传脚本，该脚本将拥有对上传文件的完全访问权限。

最后一步是您可以完全访问文件详细信息的唯一点，包括真实的实际名称、大小和内容。

浏览器提供的任何 javascript 都取决于浏览器。即使文件名在浏览器之间也会有所不同，尽管我知道的所有浏览器都保留了实际的文件名（但不是真正的实际路径），但你不能依赖它来处理未来的版本。原因是文件名显示在客户端。

所以建议是这样的：

在服务器端执行所有文件上传检查。

同样，您可能会在 JS 客户端上使用文件名，特别是如果您知道并且可以测试您的客户端将使用哪些浏览器，但我强烈建议您在服务器上进行此测试。

.png您必须记住的最后一件事是，用户可能会上传一个.zip以.png可以做。

于 2013-01-28T12:42:46.450 回答
6 
          {
             xtype: 'filefield',
             id:'photoUpload',
             buttonOnly:true,
             vtype:'fileUpload',
             buttonText: 'Photo'
          }

还有我用过的Vtype..

   Ext.apply(Ext.form.VTypes, {
             fileUpload: function(val, field) {                              
                                 var fileName = /^.*\.(gif|png|bmp|jpg|jpeg)$/i;
                                 return fileName.test(val);
                           },                 
             fileUploadText: 'Image must be in .gif,.png,.bmp,.jpg,.jpeg format'
  });
于 2013-01-28T07:14:45.083 回答
1

在您的“文件字段”xtype 配置中尝试以下代码段

regex     : (/.(gif|jpg|jpeg|png)$/i),
regexText : 'Only image files allowed for upload',
msgTarget : 'under'
于 2014-09-07T10:43:31.943 回答