HTML <INPUT TYPE =「文件」>應用過濾器

Question

<input type='file' name='userFile'> 

現在，當我將單擊瀏覽按鈕，瀏覽器對話框將顯示所有文件...如果我要過濾的文件類型是什麼讓說

• 只有圖像png格式 & 的.jpg & .gif文件
• 僅辦公文件一樣.DOC &個.DOCX & .PPS

怎麼辦呢？

Answer 1

文件輸入控件上有一個「接受」屬性，您可以在其中指定所需文件的類型。 儘管我看到許多瀏覽器都喜歡忽略它 - 可以指定的文件類型是MIME類型，所以嚴格正確的瀏覽器必須查看每個文件，而不管擴展名是否是圖像（如果是的話，它是什麼類型）。

更新：看來至少一些在Windows上每一個主要的瀏覽器版本，現在至少提供了accept屬性一定支撐。 （即使IE支持它，從版本10開始）。但是，依靠它還有點早，因爲IE 8和9仍然不支持它。一般來說，支持有點多。

• Chrome似乎有全力支持。它使用自己的內置類型列表以及系統的...因此，如果任何一個定義了類型，Chrome就知道要顯示哪些文件。
• IE 10支持文件擴展名和MIME類型。它似乎只使用系統的MIME類型到擴展名的映射，儘管......這基本上意味着如果用戶計算機上的某些東西沒有使用正確的MIME類型註冊這些擴展名，IE將不會顯示這些MIME類型的文件。
• Opera似乎只支持MIME類型 - 擴展實際上禁用了篩選器 - 並且文件選擇器的UI很糟糕。您必須選擇一種類型才能查看該類型的文件。
• Firefox似乎只支持一組有限的類型，並忽略其他類型以及擴展。
• 我沒有Safari，也不打算下載它。如果有人能夠證明Safari的支持......部分支持safari。 http://caniuse.com/#search=accept

您應該考慮添加屬性，所以支持它的瀏覽器可以幫助用戶更容易地找到正確的文件。但是我仍然建議你在文件被選擇後檢查文件名，並且如果上傳了錯誤擴展名的文件，則顯示錯誤信息。

當然，肯定有服務器仔細檢查文件是否是正確的類型。文件擴展名只是一種命名約定，可以很容易地被破壞。即使我們可以相信瀏覽器（我們不能），並且即使它確實試圖按照您的要求過濾東西（它可能不會），但它實際驗證該文件是真正的Word文檔的機會接近於零。

Answer 2

您應該使用one of the plugins使用嵌入式閃存，因爲你不能用普通做的JavaScript

Answer 3

你無法控制哪些文件可以選擇，但你可以選擇該文件後，用JavaScript讀取的文件名。如果文件類型錯誤，則可以顯示警告和/或禁用提交按鈕。但是，請記住，您無法依賴擴展名來告訴您文件是否屬於正確類型。只能將其視爲一種方式，以幫助用戶在發現您不支持該文件類型之前浪費時間上傳大文件。

下面是一些示例代碼來做到這一點。它使用jQuery，但你也可以在普通的JavaScript中做同樣的事情。

$(function() { 
    $('#inputId').change(function() { 
     var filename = $(this).val(); 
     if (! /\.txt$/.test(filename)) { 
      alert('Please select a text file'); 
     } 
    }); 
}); 

Answer 4

我想你正在尋找accept參數。試試這個工作

<input type="file" accept="image/*" /> 

Answer 5

應該使用MIME_type： 例如

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" /> 

這將只接受*.xlsx文件類型...

對於MIME類型列表中，點擊下方的鏈接：
http://www.bitsandpix.com/entry/microsoft-office-2007-2010-docx-xlsx-pptx-mime-type-to-avoid-the-zip-issue/

Answer 6

我做了一個簡單的方法f或者大多數情況下文件過濾的客戶端驗證。其實很簡單。現在，在你去嘗試實現這個之前，要明白服務器必須檢查這個文件，因爲在有人改變.js甚至是HTML時，javascript和HTML過濾並不是一個確定的事情。 我不包括所有簡單的事實，我喜歡看到其他實現使用創意思維的概念的實際腳本的，但這些都是我所採取的似乎工作，直到我找到一個更好的答案的步驟：

創建一個查找輸入並處理它的js對象。

調用一個函數，如OnClientUploadComplete爲AjaxControlToolKit的AsyncFileUpload控制。

在這個函數中，聲明一個布爾變量：bIsAccepted（設置爲false）和字符串sFileName（獲得從ARGS在文件名後）。

在if..else語句，

if(sFilename.indexOf(".(acceptedExtension1)") || 
    sFileName.indexOf(".(AcceptedExtension2)")) 
{ 
    bIsAccepted = true; 
} 
else 
{ 
    bIsAccepted = false; 
} 

然後

if(bIsAccepted) 
{ 
//Process Data 
} 

在服務器上，設置接受的文件擴展名列表和循環，並通過類似的處理會使進程凝聚力並保持一致，有效地允許用戶界面和代碼隱藏在幾乎所有情況下過濾文件類型。

鑑於這可以通過改變有不同的文件擴展名作爲名稱的一部分的名字被繞過，MIME類型也應該提交到服務器進行進一步處理前檢查。

  [http://www.webmaster-toolkit.com/mime-types.shtml][1] 

希望這有助於！

Answer 7

使用MVC我們可以限制上傳的zip文件只

.HtmlAttributes(new { accept = ".zip*" }) 

Answer 8

你可以使用JavaScript。考慮到使用JavaScript做這件事的最大問題是重置輸入文件。那麼，這個規定只有JPG（對於其它格式，你將不得不改變mime type和magic number）：

<form id="form-id"> 
    <input type="file" id="input-id" accept="image/jpeg"/> 
</form> 

<script type="text/javascript"> 
    $(function(){ 
     $("#input-id").on('change', function(event) { 
      var file = event.target.files[0]; 
      if(file.size>=2*1024*1024) { 
       alert("JPG images of maximum 2MB"); 
       $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form. 
       return; 
      } 

      if(!file.type.match('image/jp.*')) { 
       alert("only JPG images"); 
       $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form. 
       return; 
      } 

      var fileReader = new FileReader(); 
      fileReader.onload = function(e) { 
       var int32View = new Uint8Array(e.target.result); 
       //verify the magic number 
       // for JPG is 0xFF 0xD8 0xFF 0xE0 (see https://en.wikipedia.org/wiki/List_of_file_signatures) 
       if(int32View.length>4 && int32View[0]==0xFF && int32View[1]==0xD8 && int32View[2]==0xFF && int32View[3]==0xE0) { 
        alert("ok!"); 
       } else { 
        alert("only valid JPG images"); 
        $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form. 
        return; 
       } 
      }; 
      fileReader.readAsArrayBuffer(file); 
     }); 
    }); 
</script> 

採取在考慮到這是在Firefox和Chrome的最新版本進行測試，並在IEXPLORE 10。

For a complete list of mime types see Wikipedia。

For a complete list of magic number see Wikipedia。