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

Answer 3

在“filefield”xtype配置中嘗試以下代碼段

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