前端實現input[type='file']上傳圖片預覽效果
阿新 • • 發佈：2017-11-07
query selector indexof 圖片加載 code lock 復用 lec 應用
眾所周知JavaScript在設計上處於安全角度考慮，是不允許讀寫本地文件的（原因請自行百度）；
但是在實際項目應用中，經常會使用到上傳圖片，並且可以讓用戶直接預覽圖片。對於此種做法有兩種方法可以實現：一是前後臺交互，後臺將圖片地址返回前端；
二是，我今天寫的內容，使用FileReader對象——允許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩沖區）的內容；此種方法可以優化圖片加載速度，減少方法一占用帶寬的問題；
但是，此種方法兼容性存在問題，主要是IE瀏覽器（ie10以上沒問題），本文不在討論兼容性問題，代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <style type="text/css"> #preview { display: inline-block; width: 2.56rem; height: 2.56rem; position: relative; background-image: url(img/iconfont-tianjia.png); background-repeat: no-repeat; background-size: cover; } #file{ width: 100%; height: 100%; opacity: 0; position: absolute; left: 0; top: 0; cursor: pointer; z-index: 5; } </style> </head> <body> <div id="preview"> <input type="file" accept="image/*" id="file" value="" /> </div> <script type="text/javascript"> var preview = document.querySelector(‘#preview‘); var eleFile = document.querySelector(‘#file‘); eleFile.addEventListener(‘change‘, function() { var file = this.files[0]; // 確認選擇的文件是圖片 if(file.type.indexOf("image") == 0) { var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e) { // 圖片base64化 var newUrl = this.result; preview.style.backgroundImage = ‘url(‘ + newUrl + ‘)‘; }; } }); </script> </body> </html>
直接復用測試即可，FileReader對象是通過將圖片url轉換成base64格式，然後顯示出來。
前端實現input[type='file']上傳圖片預覽效果