HTML5+CSS3-充实笔记0622

333

收藏 2019-06-22

FileReader对象有一个result属性，用于存储读取文件结果
异步读取文件时，会触发事件，根据不同的事件处理不同的操作，可更人性化和健壮
读取数据中断时触发onabort事件
读取数据出错时触发onerror事件
读取数据开始时触发onloadstart事件
读取中，触发onprogress事件
读取成功完成时，触发onload事件
数据读取完成时，触发onloadend事件

示例：（以二进制读取数据）

<!DOCTYPE html>
<html>
<head>
   <title>7.3.1.html</title>
   <meta charset="utf-8">
   <script type="text/javascript">
      //read binary file
      function fileBinary(){
         var myDiv = document.getElementById("myDiv");
         if(typeof FileReader=="undefined"){
               myDiv.innerHTML="<h2>browser dont support FileReader</h2>";
               return false;
         }
         var file=document.getElementById("file").files[0];
         var reader =new FileReader();
         reader.readAsBinaryString(file);
         reader.onload = function(e){
               myDiv.innerHTML = this.result;
         }
      }
   </script>
</head>
<body>
   <input type="file" id="file" />
   <input type="button" value="Read binary file" />
   <div id="myDiv" name="myDiv"></div>

</body>
</html>