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