Question

我想在ExtJs4的文件字段中添加验证，这样用户只能浏览.png，.jpeg图像文件。我该怎么办？

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

Answer 1

我认为了解文件上传的工作原理非常重要，以免日后出现麻烦......

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

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

上传过程本身就是在以下步骤中进行的：

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

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

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

所以建议如下：

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

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

您必须记住的最后一件事是，用户可能会上传以.png结尾的文件，但文件本身是.zip且扩展名已更改 - 因此要确认该文件是{ {1}}你需要实际查看文件数据，只有服务器才能这样做。

Answer 2

          {
             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'
  });

Answer 3

在“filefield”xtype config

中尝试以下代码段

regex     : (/.(gif|jpg|jpeg|png)$/i),
regexText : 'Only image files allowed for upload',
msgTarget : 'under'

验证extjs4中的Uploadfield

3 个答案: