js實現圖片上傳實時顯示
阿新 • • 發佈：2017-12-01
input res window splay ack 顯示 style rip 是否
在開發的時候經常遇到這樣的需求，用戶在上傳圖片的時候，想要看到自己上傳的圖片是否正確，這時候需要把用戶上傳的圖片及時顯示出來，然後等他點擊上傳的時候，程序再執行上傳到服務器。
<!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>
js實現圖片上傳實時顯示