html5獲取上傳圖片的大小和即時顯示
阿新 • • 發佈：2019-02-09
最近看到h5帶有這個功能 ，效果如程式碼所示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="file" multiple="multiple" onchange="checkinfo(this)"> <div id="win"></div> <script> function轉載 https://segmentfault.com/a/1190000004706880checkinfo(obj){ var len = obj.files.length; console.log(obj.files); for (var i =0 ; i < len ; i++){ showimg(obj.files[i]); } } function showimg(img){ var a = new FileReader(); a.readAsDataURL(img); a.onload=function(){ var img = new Image(); img.src=a.result; document.getElementById('win').appendChild(img); } } </script> </body> </html>
https://developer.mozilla.org/en/docs/Web/API/FileReader