在開發的時候經常遇到這樣的需求，用戶在上傳圖片的時候，想要看到自己上傳的圖片是否正確，這時候需要把用戶上傳的圖片及時顯示出來，然後等他點擊上傳的時候，程式再執行上傳到伺服器。 ...
在開發的時候經常遇到這樣的需求，用戶在上傳圖片的時候，想要看到自己上傳的圖片是否正確，這時候需要把用戶上傳的圖片及時顯示出來，然後等他點擊上傳的時候，程式再執行上傳到伺服器。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="file" name="file" onchange="showPreview(this)" /> <img id="portrait" src="" style="display:none;" /> </body> </html> <script type="text/javascript"> function showPreview(source) { var file = source.files[0]; if(window.FileReader) { var fr = new FileReader(); console.log(fr); var portrait = document.getElementById('portrait'); fr.onloadend = function(e) { portrait.src = e.target.result; }; fr.readAsDataURL(file); portrait.style.display = 'block'; } } </script>
