javascript - 這種上傳圖片預(yù)覽怎么做?
問(wèn)題描述
類似于這種上傳圖片,還能預(yù)覽顯示的這種,前端應(yīng)該怎么寫,有沒(méi)有類似的代碼可以提供給我看看!謝謝
問(wèn)題解答
回答1: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
回答3:自己之前寫過(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)框顯示大的高清圖。
回答4:兩個(gè)demo:點(diǎn)擊事件https://github.com/treeandgra...圖片拖拽的https://github.com/treeandgra...
相關(guān)文章:
1. node.js - mysql如何通過(guò)knex查詢今天和七天內(nèi)的匯總數(shù)據(jù)2. mysql 插入數(shù)值到特定的列一直失敗3. 360瀏覽器與IE瀏覽器有何區(qū)別???4. Python從URL中提取域名5. mysql - 百萬(wàn)行的表中是否盡量避免使用update等sql語(yǔ)句?6. python - 在使用Pycharm時(shí)經(jīng)常看到如下的樣式,小括號(hào)里紅色的部分是什么意思呢?7. javascript - 新浪微博網(wǎng)頁(yè)版的字?jǐn)?shù)限制是怎么做的8. 怎么在網(wǎng)頁(yè)中設(shè)置圖片進(jìn)行左右滑動(dòng)9. javascript - 豆瓣的這個(gè)自適應(yīng)是怎么做的?10. javascript - 用jsonp抓取qq音樂(lè)總是說(shuō)回調(diào)函數(shù)沒(méi)有定義
