首页 > 代码库 > HTML5 fileReader 随堂笔记
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]);//读取成为url29 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 随堂笔记
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。