文件輸入：比較文件類型，只接受圖片格式（JPG，BMP等）

Question

我目前正在OT找到一種方法，使用jquery來驗證，如果一個文件是圖片格式(jpeg,jpg,bmp,gif,etc)。我已經能夠找出輸入是否爲空或者與簡單的.length比較。我將如何檢查文件類型並只接受有效的圖片格式。

Emtpy或不輸入：

if ($.trim($('#textInput').val()).length == 0) { 
    alert("Should Not Be Empty!"); 
} 

Answer 1

給定文件輸入：

var extension = $('#file_input').val().split('.').pop(); 
if (['bmp', 'gif', 'png', 'jpg', 'jpeg'].indexOf(extension) > -1) { 
    console.log('validated'); 
} else { 
    console.log('invalid extension'); 
} 

對於更廣泛的文件類型過濾，您應使用服務器端驗證。

Answer 2

你可以做一個簡單的函數來提取文件的擴展名：

function getExtension(file) { 
    return file.split('.').pop(); 
} 

然後你就可以檢查輸入值：

var file = $.trim($('#textInput').val()); 
if (['gif','png', ...].indexOf(getExtension(file)) > - 1) { 
    ... 
} 

而且還要檢查這個帖子，或許有用：

How to validade in HTML5 to only allow in 'input type="file"' JPG, GIF or PNG?

Answer 3

爲了安全起見，你應該不使用JavaScript測試有效的文件類型。 Javascript只是客戶端，因此您的腳本可能很容易被忽略，或者用戶可以用一個單獨的擴展名重命名它們的文件，並且您的檢查點會失敗。

查找到MIME types和用戶上傳文件的服務器端驗證。這是一個複雜的主題，由您來決定您想花多少時間。安全性隨着更徹底的檢查而增加

我使用的檢查是文件大小，MIME類型，並上傳位置（以確保沒有人試圖從遠程站點上傳腳本）。在PHP中這些功能是filesize，fileinfo，mime_content_type和is_uploaded_file。其他語言也有類似的功能。

你可以再進一步，測試文件的位，以確保它不是惡意代碼或假裝通過欺騙MIME頭，例如是一個JPEG文件。