H5 中的 new FileReader() 以及 識別上傳的文件是否爲圖片

如果瀏覽器版本較高支持FileReader，就能夠直接取文件list（h5裏file對象爲一個list，能夠上傳多個文件）對象的類型，
因此能夠獲得後綴直接以此來判斷上傳的文件的類型。
file對象有filename.type和filename.size的API，所以咱們須要得到文件的後綴，以此來判斷文件類型。

if(typeof FileReader != 'undefined'){    
    var file = document.getElementById("imageFile").files[0];    
    if((file.type).indexOf("image/")==-1){  
    alert("提示", "請上傳圖片!", "warning");  
}  複製代碼

FileReader主要用於將文件內容讀入內存，經過一系列異步接口，能夠在主線程中訪問本地文件。
經過FileReader接口中的readAsDataURL()方法能夠獲取API異步讀取的文件數據，另存爲數據URL;將該URL綁定到img標籤的src屬性上，就能夠實現圖片的上傳預覽效果了。

var input  = document.getElementById("file");   // input file
    input.onchange = function(){
        var file = this.files[0];
            if(!!file){
                var reader = new FileReader();
                // 圖片文件轉換爲base64
                reader.readAsDataURL(file);
                reader.onload = function(){
                    // 顯示圖片
                    document.getElementById("file_img").src = this.result;
            }
    }
}

<input type="file" id="file">
<div>
    <img id="file_img"/>
</div>複製代碼