如何讓<input type =「file」>只接受圖像文件

169

我需要上傳一個圖像文件。我正在使用<input type="file">。如何讓<input type =「file」>只接受圖像文件

但是，它接受所有類型的文件。我只需要帶有擴展名的文件，例如.jpg,.gif等。

如何讓上傳對話框只允許選擇圖像文件？

來源

2010-09-30 kbvishnu

服務器端使用什麼技術？ –

kbvishnu，也許你可以重新考慮你很久以前接受的答案。你不必接受另一個答案。我只是建議，根據我們獲得答案的標誌數量和與其他答案相比的選票水平，或許你應該至少考慮不接受答案。 –

517

使用輸入標籤的接受屬性。因此，只接受的PNG，JPEG圖片和GIF，你可以使用下面的代碼：

<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />

或者乾脆：

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

注意，這僅提供向瀏覽器提示向用戶顯示哪些文件類型，但這可以很容易規避，所以你應該總是驗證服務器上傳的文件。

它應該可以在IE 10+，Chrome，Firefox，Safari 6+，Opera 15+中使用，但手機上的支持非常粗略（截至2015年），有些報道可能實際上阻止了一些移動瀏覽器上傳任何東西畢竟，所以一定要好好測試你的目標平臺。

有關詳細瀏覽器的支持，看到http://caniuse.com/#feat=input-file-accept

來源

2011-06-03 10:20:55

在IE9中不起作用。 – hllau

在Opera中不起作用12.12 –

在FF 19中不起作用！ – behz4d

120

使用此：

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

工作在兩個FF和鉻。

來源

2013-04-06 23:31:33 Tyilo

適用於Chrome和Firefox。也適用於Opera。 – 2014-05-09 17:13:26

accept屬性不是一個驗證工具，所有的上傳應該在服務器上進行驗證，總是... – TlonXP

這在Safari中是有效的。 – idmean

使用方法如下

<input type="file" accept=".png, .jpg, .jpeg" />

它爲我

https://jsfiddle.net/ermagrawal/5u4ftp3k/

來源

2015-08-26 10:48:28

您可以使用accept屬性爲<input type="file">閱讀本文檔http://www.w3schools.com/tags/att_input_accept.asp

來源

2015-09-29 07:55:04 yussan

這可以通過

實現

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

但這不是一個好方法。你必須在服務器端編碼來檢查文件的圖像與否。

檢查圖像文件的實際圖像或僞像

if(isset($_POST["submit"])) { 
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]); 
    if($check !== false) { 
     echo "File is an image - " . $check["mime"] . "."; 
     $uploadOk = 1; 
    } 
    else { 
     echo "File is not an image."; 
     $uploadOk = 0; 
    } 
}

來源

2016-08-09 17:13:08

步驟：
1.添加接受屬性輸入標籤
2.使用javascript驗證
3.添加服務器端驗證，驗證內容是否真的預期的文件類型

對於HTML和javascript：

<html> 
<body> 
<input name="image" type="file" id="fileName" accept=".jpg,.jpeg,.png" onchange="validateFileType()"/> 
<script type="text/javascript"> 
    function validateFileType(){ 
     var fileName = document.getElementById("fileName").value; 
     var idxDot = fileName.lastIndexOf(".") + 1; 
     var extFile = fileName.substr(idxDot, fileName.length).toLowerCase(); 
     if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){ 
      //TO DO 
     }else{ 
      alert("Only jpg/jpeg and png files are allowed!"); 
     } 
    } 
</script> 
</body> 
</html>

說明：

的接受屬性過濾文件這將顯示在文件選擇器彈出窗口中。但是，這不是一個驗證。它只是一個提示給瀏覽器。用戶仍然可以更改彈出窗口中的選項。
JavaScript只驗證文件擴展名，但不能真正驗證選擇文件是否是實際的JPG或PNG。
所以你必須在服務器端編寫文件內容驗證。

來源

2017-06-04 11:34:34

如何讓<input type =「file」>只接受圖像文件

回答

相關問題