文章詳情頁
javascript - 這種上傳圖片預覽怎么做?
瀏覽:132日期:2022-11-19 18:11:23
問題描述
類似于這種上傳圖片,還能預覽顯示的這種,前端應該怎么寫,有沒有類似的代碼可以提供給我看看!謝謝
問題解答
回答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:自己之前寫過一個商城商品圖片的預覽,思路很簡單,不知道對你有沒有幫助:1.上傳上的圖片,網頁上肯定顯示小的縮略圖吧;2.后臺(我們當時是后臺,你們也可以想想其他辦法)存儲兩張圖片,一張小的縮略圖,一張預覽的高清大圖;3.點擊小的縮略圖時,用模態框顯示大的高清圖。
回答4:兩個demo:點擊事件https://github.com/treeandgra...圖片拖拽的https://github.com/treeandgra...
標簽:
JavaScript
相關文章:
1. html5 - 有可以一次性把所有 css外部樣式轉為html標簽內style=" "的方法嗎?2. sql語句 - mysql中關聯表查詢問題3. javascript - 原生canvas中如何獲取到觸摸事件的canvas內坐標?4. javascript - [js]為什么畫布里不出現圖片呢?在線等5. javascript - vscode alt+shift+f 格式化js代碼,通不過eslint的代碼風格檢查怎么辦。。。6. javascript - 如何將一個div始終固定在某個位置;無論屏幕和分辨率怎么變化;div位置始終不變7. html - vue項目中用到了elementUI問題8. javascript - iframe 為什么加載網頁的時候滾動條這樣顯示?9. javascript - 求解答:實例對象調用constructor,此時constructor內的this的指向?10. javascript - 有什么比較好的網頁版shell前端組件?
排行榜
