验证extjs4中的Uploadfield

Question

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

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

Answer 1

我认为理解文件上传的工作原理很重要,这样可以防止将来遇到麻烦......

出于安全原因,以下内容适用:

• 除非用户明确单击上载字段,否则浏览器无法访问文件系统.
• 浏览器对上传的文件具有最小的访问权限,特别是 - 您的JS代码可能能够看到文件名(浏览器必须在字段中显示它),但没有别的(大多数浏览器上的路径本身都不正确)一).

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

• 用户单击上载字段,启动文件选择对话框.
• 该浏览器实现通过对话框访问文件系统,允许用户选择一个文件.
• 一旦OK点击后,浏览器将文件发送到服务器.
• 该服务器在其文件放在temp目录(每台服务器配置).
• 上传完成后,将使用文件详细信息调用服务器上的上载脚本,该脚本将具有对上载文件的完全访问权限.

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

浏览器提供javascript的任何东西都是浏览器所依赖的.即使文件名在浏览器之间也会有所不同,尽管我所知道的所有浏览器都保留了实际的文件名(但不是实际的实际路径),您不能依赖它来使用未来的版本.这样做的原因是该文件的名称被显示在客户端.

所以建议如下:

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

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

你要记住的最后一件事是用户可能上传一个以文件结尾.png的文件,但文件本身是一个.zip更改了扩展名的文件 - 所以要真正确认文件.png是否需要实际查看文件数据,只有服务器可以做.

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