form表单中，file选择图片后预览
生活随笔
收集整理的這篇文章主要介紹了
form表单中，file选择图片后预览
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前言
略
代碼
<!DOCTYPE html> <html lang="zh" > <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.preview-item {width:400px;height:300px;overflow:hidden;}</style> </head> <body class="white-bg"><input type="file" name="avatar" id="inputImage" accept="image/*" onchange="change()" multiple /><div id="previewContainer"></div><script type="text/javascript"> function change() {var inputImage = document.getElementById("inputImage");var files = inputImage.files;var previewContainer = document.getElementById("previewContainer");while(previewContainer.hasChildNodes()){ previewContainer.removeChild(previewContainer.firstChild); }for (var i = 0; i < files.length; i++) {var file = files[i];var imageType = /^image\//;if (!imageType.test(file.type)) {continue;}var img = document.createElement("img");img.classList.add("preview-item");img.file = file;previewContainer.appendChild(img); // previewContainer是用來預覽圖片的divvar reader = new FileReader();reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);reader.readAsDataURL(file);} } </script> </body> </html>參考
在web應用程序中使用文件
總結
以上是生活随笔為你收集整理的form表单中，file选择图片后预览的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript Blob对象
- 下一篇： QQ技巧技术全攻略