問(wèn)題描述

類似于這種上傳圖片，還能預(yù)覽顯示的這種，前端應(yīng)該怎么寫(xiě)，有沒(méi)有類似的代碼可以提供給我看看！謝謝

問(wèn)題解答

var fr = new FileReader(), file = document.getElementById('file'), img = document.createElement('img');file.onchange = function(e){ fr.onload = function(e){var res = this.result;img.src = res;document.body.appendChild(img);//顯示 };fr.readAsDataURL(file.files[0]);//讀取文件};回答2：

web uploader.js或FileReader API

自己之前寫(xiě)過(guò)一個(gè)商城商品圖片的預(yù)覽，思路很簡(jiǎn)單，不知道對(duì)你有沒(méi)有幫助：1.上傳上的圖片，網(wǎng)頁(yè)上肯定顯示小的縮略圖吧；2.后臺(tái)（我們當(dāng)時(shí)是后臺(tái)，你們也可以想想其他辦法）存儲(chǔ)兩張圖片，一張小的縮略圖，一張預(yù)覽的高清大圖；3.點(diǎn)擊小的縮略圖時(shí)，用模態(tài)框顯示大的高清圖。

兩個(gè)demo:點(diǎn)擊事件https://github.com/treeandgra...圖片拖拽的https://github.com/treeandgra...