检查浏览器是否支持
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>
时间： 2024-10-08 18:55:58