關於File API這裡就不詳細解釋了，小伙伴們自行度娘吧，來我們就要利用文件句柄來讀取文件內容，這是通過FileReader來實現的，通過FileReader接口，我們可以異步地將文件內容加載到內存中，賦予某個js變量。
複製代碼代碼如下:
function getImgSrc(target, callback) {
if (window.FileReader) {
var oPreviewImg = null, oFReader = new window.FileReader();
oFReader.onload = function (oFREvent) {
oPreviewImg = new Image();
var type = target.files[0].type.split("/")[1];
var src = oFREvent.target.result;
oPreviewImg.src = src;
if (typeof callback == "function") {
callback(oPreviewImg, target, type, src);
}
return oPreviewImg.src;
};
return (function () {
var aFiles = target.files;
if (aFiles.length === 0) {
return;
}
if (!IsImgType(aFiles[0].type)) {
alert("You must select a valid image file!");
return;
}
if (aFiles[0].size > 1024 * 1024) {
target.value = "";
alert('Please upload image file size less than 1M.');
return;
}
oFReader.readAsDataURL(aFiles[0]);
})();
}
if (navigator.appName === "Microsoft Internet Explorer") {
return (function () {
document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = target.value;
})();
}
}
以上就是javascript結合fileReader 實現上傳圖片的關鍵性代碼了，小伙伴們喜歡嗎？