extjs4中Uploadfield的验证

Question

我想在ExtJs4的文件字段中添加验证，这样用户只能浏览.png，.jpeg图像files..How我应该这样做吗？

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

Answer 1

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

   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 2

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

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

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

• 用户单击上载域，启动文件选择对话框。
• browser通过该对话框实现对文件系统的访问，允许用户选择文件。
• 单击后，< OK >E115浏览器将文件发送到服务器。
• 服务器E220将文件放在其temp目录中(完成后，将调用服务器上的上载脚本)。该脚本将拥有对上载文件的完全访问权限。

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

浏览器给javascript的任何东西都是依赖于浏览器的。尽管我所知道的所有浏览器都会保留实际的文件名(而不是实际的路径)，但即使文件名在不同的浏览器中也会有所不同，但您不能依赖于此来在未来的版本中工作。原因是文件名显示在客户端。

因此，建议是这样的：

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

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

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

Answer 3

在你的'filefield‘xtype配置中尝试下面的代码片段

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