需求： 點(diǎn)擊上傳圖片按鈕，選擇圖片以后，不請(qǐng)求后端接口，直接將圖片展示在縮略圖中。
解決方案： 使用 FileReader 和 FileReader 中的 readAsDataURL 方法。
第一步
從input[type=“file”] (上傳文件標(biāo)簽) 里面拿到file數(shù)據(jù)，類(lèi)似下圖
第二步
拿到file數(shù)據(jù)后，執(zhí)行下面代碼
// file 是文件數(shù)據(jù)
// 讀取文件
var reader = new FileReader();
// base64位讀取
reader.readAsDataURL(file);
reader.onload = function (e) {
// 給img標(biāo)簽src復(fù)制（結(jié)果是base64圖片）
img_src = e.target.result;
}
效果展示：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-609870.html
選擇前
選擇圖片
選擇后
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-609870.html
到了這里，關(guān)于前端JS 展示上傳圖片縮略圖（本地圖片讀取）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
