这篇文章主要为大家详细介绍了JavaScript使用readAsDataUrl方法预览图片，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了readAsDataUrl方法预览图片的具体代码，供大家参考，具体内容如下
<html> <head> <title> New Document </title> <meta content="EditPlus"> <meta content=""> <meta content=""> <meta content=""> </head> <body> <script type="text/javascript"> function $$(id){ return document.getElementById(id); } function filePrevImg(files){ //检测浏览器是否支持FileReader对象 if(typeof FileReader == "undefined"){ alert("您的浏览器不支持FileReader对象！"); } var strHtml = ""; for(var intI=0;intI<files.length;intI++){ var tmpFile = files[intI]; var reader = new FileReader();//每循环一次都要重新new一个FileReader实例 reader.readAsDataURL(tmpFile); reader.onload=function(e){ alert(e.target.result); strHtml += "<img src='"https://www.jb51.net/+e.target.result+"' alt=''/>"; $$("prevUpload").innerHTML = "<li>"+strHtml+"</li>"; }; } } </script> </head> <body> <fieldset> <legend>使用readAsDataUrl()方法预览图片</legend> <input type="file" onchange="filePrevImg(this.files);" multiple="true" /> <ul></ul> </fieldset> </body> </html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: