HTML5 fileReader 随堂笔记
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5 fileReader 随堂笔记相关的知识，希望对你有一定的参考价值。
检查浏览器是否支持
1 if(window.FileReader) { 2 } else { 3 alert("您的浏览器不支持上传预览"); 4 }
简单方法
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>fileReader上传文件</title> 7 </head> 8 9 <body> 10 <!--multiple多个文件一起选取--> 11 <input type="file" name="file" id="file" value="" multiple="multiple" /> 12 <input type="button" name="btn" id="btn" value="显示" /> 13 <div id="preview"> 14 </div> 15 <script type="text/javascript"> 16 window.onload = function() { 17 if(window.FileReader) { 18 var oFile = document.getElementById("file");//上传按钮 19 var oBtn = document.getElementById("btn");//预览显示按钮 20 var oPre = document.getElementById(‘preview‘)//装图片的框 21 //FileReader对象需要new一个出来 22 var reader = new FileReader(); 23 oBtn.onclick = function() { 24 var aFiles = oFile.files; 25 26 oPre.innerHTML= "";//清空之前的图片 27 // reader.readAsBinaryString(aFiles[0]); //读取成为二进制 28 reader.readAsDataURL(aFiles[0]);//读取成为url 29 console.log(reader); 30 reader.onload = function() { 31 // oPre.innerText = this.result;//读取的结果放到格中 32 var img=new Image();//new img对象 33 img.src= this.result;//img对象改为64编码 34 oPre.appendChild(img);//插入到框中 35 } 36 // reader.onloadstart = function() { 37 // alert("读取开始"); 38 // } 39 } 40 41 } else { 42 alert("您的浏览器不支持上传预览"); 43 } 44 } 45 </script> 46 </body> 47 48 </html>
以上是关于HTML5 fileReader 随堂笔记的主要内容，如果未能解决你的问题，请参考以下文章