本文实例为大家分享了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.js根据代码运行环境选择baseurl的方法
- JS正则表达式替换url参数的方法
- 详谈js对url进行编码和解码(三种方式的区别)
- JS解析url查询参数的简单代码
- Angular.JS去掉访问路径URL中的#号详解
- JavaScript获取URL参数的方法之一
- jsp中获得路径的两种方法和获得url路径的方法(推荐)
- JavaScript、C# URL编码、解码总结
- JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
- JS中通过url动态获取图片大小的方法小结(两种方法)