如何通過FileReader檢查上傳圖像的類型？

有下面的代碼，這使得預覽上傳服務器之前：如何通過FileReader檢查上傳圖像的類型？

$(function(){ 
    var preview = $(".preview"); 

    $("#menu_image").change(function(event){ 
    var input = $(event.currentTarget); 
    var file = input[0].files[0]; 
    var reader = new FileReader(); 
    reader.onload = function(e){ 
     var img = new Image; 
     img.onload = function() { 
     if ((img.with != 160) || (img.height != 160)) { 
      return; 
     } 
     preview.attr("src", img.src);   
     }; 
     img.src = e.target.result; 
    }; 

    reader.readAsDataURL(file); 
    }); 
});

但這代碼不檢查文件的類型。我該怎麼做？提前致謝。

來源

2014-02-10 malcoauri

嘗試使用擴展選擇這樣的：

if($('img[src $= "jpg"])) dosomething; // if extension is jpg then dosomething

來源

2014-02-10 09:01:28

你可以做類似的檢查文件的擴展名的東西：

var extension = file.name.substring(file.name.lastIndexOf('.')); 

    // Only process image files. 
    var validFileType = ".jpg , .png , .bmp"; 
    if (validFileType.toLowerCase().indexOf(extension) < 0) { 
     alert("please select valid file type. The supported file types are .jpg , .png , .bmp"); 
     return false; 
    }

來源

2014-02-10 09:14:09 Manoj

請修改我的代碼 – malcoauri

@malcoauri在** var file = input [0] .files [0]; **這一行之後，您只需將上面的代碼行添加到您的代碼中。上面的代碼將檢查提到的文件類型，如果不匹配，將會向用戶發出錯誤消息。讓我知道你是否仍然需要幫助。 – Manoj

這並不能確定文件的真實MIME類型。我可以在圖像/ jpeg上放置任何我想要的擴展名，並且在一天結束時它仍然是一個圖像/ jpeg – zgr024

你並不需要加載的FileReader知道文件類型。使用你的代碼：

var file = input[0].files[0];

是檢查file.type財產一樣簡單。

您可以檢查，如果該文件是一個圖像：

if (file.type.match('image.*')) { 
    console.log("is an image"); 
}

和類型的圖像爲：

if (file.type.match('image.*')) { 
    console.log("is an image"); 
    console.log("Show type of image: ", file.type.split("/")[1]); 
}

注意file.type.split("/")[1]應該是一個「形象」

來源

2014-10-07 11:41:00 sailens

假設用戶（黑客）hs重命名了一個擴展名爲.png的php文件。在帽子類型測試中只會給出image/png。但這不是圖像文件。 –

@DineshPatra你可以隨時比較每個文件的第一個字節，看看它是否符合下列條件：'.JPG是{255,216,255,224}'，'.BMP是{66,77}'，'.GIF是{71,73,70 ，56}'，'。PNG是{137,80,78,71}'。但是這通常在後端進行檢查。 – sailens

如何通過FileReader檢查上傳圖像的類型？

回答

相關問題