限制文件上傳選擇到特定類型

Question

總之，通過<input type="file" />元素來限制文件類型的選擇？例如，如果我只想要上傳圖像類型，我會限制可能的選擇（圖像/ jpg，圖像/ gif，圖像/ png），並且選擇對話框會灰化其他MIME類型的文件。

p.s.我知道我可以通過掃描.type屬性在File API之後做到這一點。我真的想在手前限制這一點..我也知道我可以通過閃光燈做到這一點，但我不想爲此使用閃光燈。

Answer 1

有一個用於此特定目的的html屬性，稱爲accept，但它在瀏覽器中幾乎沒有支持。因爲建議使用服務器端驗證。

<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" /> 

如果您沒有訪問到後端看看像SWFUpload基於閃存的解決方案。

查看更多關於此這裏：File input 'accept' attribute - is it useful?

Answer 2

這是更好地讓用戶選擇的任何文件，然後檢查它的類型 - 這是由瀏覽器支持更好：

var 
    file = (el[0].files ? el[0].files[0] : el[0].value || undefined), 
    supportedFormats = ['image/jpg','image/gif','image/png']; 

if (file && file.type) { 
    if (0 > supportedFormats.indexOf(file.type)) { 
     alert('unsupported format'); 
    } 
    else { 
     upload(); 
    } 
} 

你也可以檢查對於使用file.size屬性的文件大小。