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>
