若是瀏覽器版本較高支持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 fileinput.onchange = function(){var file = this.files[0];if(!!file){var reader = new FileReader();// 圖片文件轉換為base64reader.readAsDataURL(file);reader.onload = function(){// 顯示圖片document.getElementById("file_img").src = this.result;}} }<input type="file" id="file"> <div><img id="file_img"/> </div>復制代碼

總結

以上是生活随笔為你收集整理的H5 中的 new FileReader() 以及 识别上传的文件是否为图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。