h5-FileReader对象的使用 

 1 <!--FileReader对象的使用-->
 2 
 3 <!--需要及时预览
 4 及时：当用户选择完图片之后就立即进行预览处理--onchange事件
 5 预览：通过文件读取对象的readAsDataURL()完成
 6 -->
 7 <form action="">
 8     文件：<input type="file" name="myFile" id="myFile"  onchange="getFileContent();"><br/>
 9     <input type="submit">
10 </form>
11 <img src="" alt="">
12 
13 <script>
14     function getFileContent() {
15         //创建文件读取对象
16         var reader = new FileReader();
17         //读取文件，获取DataURL
18         var file = document.querySelector("#myFile").files;
19         reader.readAsDataURL(file[0]);
20         /*获取数据*/
21         reader.onload = function () {
22             /*展示*/
23             document.querySelector("img").src = reader.result;
24         }
25     }
26 </script>

 

posted @ 2019-08-18 18:16  FengBrother  阅读(270)  评论(0)    收藏  举报