这篇文章主要为大家详细介绍了JavaScript使用readAsDataUrl方法预览图片,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了readAsDataUrl方法预览图片的具体代码,供大家参考,具体内容如下
<html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" 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='"+e.target.result+"' alt=''/>"; $$("prevUpload").innerHTML = "<li>"+strHtml+"</li>"; }; } } </script> </head> <body> <fieldset> <legend>使用readAsDataUrl()方法预览图片</legend> <input type="file" name="fileUpload" id="fileUpload" onchange="filePrevImg(this.files);" multiple="true" /> <ul id="prevUpload"></ul> </fieldset> </body> </html>
【相关推荐】
1. 免费js在线视频教程
3. php.cn独孤九贱(3)-JavaScript视频教程
以上是js使用readAsDataUrl预览图片实例代码的详细内容。更多信息请关注PHP中文网其他相关文章!