JavaScript使用readAsDataUrl方法预览图片

2019-11-19 16:37:11

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：关于vue-router路径计算问题

下一篇：Bootstrap table使用方法总结