javascript結(jié)合fileReader 實現(xiàn)上傳圖片
關(guān)于File API這里就不詳細(xì)解釋了,小伙伴們自行度娘吧,來我們就要利用文件句柄來讀取文件內(nèi)容,這是通過FileReader來實現(xiàn)的,通過FileReader接口,我們可以異步地將文件內(nèi)容加載到內(nèi)存中,賦予某個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結(jié)合fileReader 實現(xiàn)上傳圖片的關(guān)鍵性代碼了,小伙伴們喜歡嗎?
相關(guān)文章
Echarts讀取動態(tài)數(shù)據(jù)完整代碼
這篇文章主要給大家介紹了關(guān)于Echarts讀取動態(tài)數(shù)據(jù)的相關(guān)資料,使用Echarts畫圖時,數(shù)據(jù)一般不是靜態(tài)寫死的,而是通過后端接口動態(tài)獲取的,需要的朋友可以參考下2023-10-10layui 表格操作列按鈕動態(tài)顯示的實現(xiàn)方法
今天小編就為大家分享一篇layui 表格操作列按鈕動態(tài)顯示的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09js點擊列表文字對應(yīng)該行顯示背景顏色的實現(xiàn)代碼
這篇文章主要介紹了js點擊列表文字對應(yīng)該行顯示背景顏色的實現(xiàn)代碼,感興趣的小伙伴可以參考下2015-08-08使用JavaScript實現(xiàn)Java的List功能(實例講解)
使用JavaScript實現(xiàn)Java的List功能(實例講解)。需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11javascript 通用簡單的table選項卡實現(xiàn)
鑒于UI妹妹每次交付過來的選項卡都夾帶了多多少少的js,而且每遇到選項卡就加一點js,造成垃圾低劣代碼逐漸堆積過多了,一直想做一個通用簡潔的選項卡庫。2010-05-05XDomainRequest之IE8和IE9發(fā)送跨域請求拒絕訪問解決方法
這篇文章主要介紹了XDomainRequest之IE8和IE9發(fā)送跨域請求拒絕訪問解決方法,需要的朋友可以參考下2023-06-06深入理解JavaScript字節(jié)二進(jìn)制知識以及相關(guān)API
當(dāng)前,前端對二進(jìn)制數(shù)據(jù)有許多的API可以使用,這豐富了前端對文件數(shù)據(jù)的處理能力,有了這些能力,就能夠?qū)D片等文件的數(shù)據(jù)進(jìn)行各種處理。本文將著重介紹一些前端二進(jìn)制數(shù)據(jù)處理相關(guān)的API知識,希望對大家有所幫助2023-02-02js將多維數(shù)組轉(zhuǎn)為一維數(shù)組后去重排序
本文主要介紹了js將多維數(shù)組轉(zhuǎn)為一維數(shù)組后去重排序,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06