h5-FileReader对象的使用

 <!--FileReader对象的使用-->

 <!--需要及时预览
 及时：当用户选择完图片之后就立即进行预览处理--onchange事件
 预览：通过文件读取对象的readAsDataURL()完成
 -->
 <form action="">
     文件：<input type="file" name="myFile" id="myFile"  onchange="getFileContent();"><br/>
     <input type="submit">
 </form>
 <img src="" alt="">

 <script>
     function getFileContent() {
         //创建文件读取对象
         var reader = new FileReader();
         //读取文件，获取DataURL
         var file = document.querySelector("#myFile").files;
         reader.readAsDataURL(file[0]);
         /*获取数据*/
         reader.onload = function () {
             /*展示*/
             document.querySelector("img").src = reader.result;
         }
     }
 </script>