HTML5之FileReader的使用.RP

HTML5定义了FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。

 

FileReader的使用方式非常简单，可以按照如下步骤创建FileReader对象并调用其方法：

1.检测浏览器对FileReader的支持

 

[javascript] view plain copy
  1. if(window.FileReader) {  
  2.     var fr = new FileReader();  
  3.     // add your code here  
  4. }  
  5. else {  
  6.     alert("Not supported by your browser!");  
  7. }  



 

2. 调用FileReader对象的方法

 

FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能，需要注意的是 ，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。

方法名参数描述
abort none 中断读取
readAsBinaryString file 将文件读取为二进制码
readAsDataURL file 将文件读取为 DataURL
readAsText file, [encoding] 将文件读取为文本

readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。 readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。 readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

 

3. 处理事件

 

FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态，下面这个表格归纳了这些事件。

事件描述
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发，无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中

文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。

 

[javascript] view plain copy
  1. fr.onload = function() {  
  2.     this.result;  
  3. };  

 

 

下面通过一个上传图片预览和带进度条上传来展示FileReader的使用。

 

[html] view plain copy
  1. <script type="text/javascript">  
  2.         function showPreview(source) {  
  3.             var file = source.files[0];  
  4.             if(window.FileReader) {  
  5.                 var fr = new FileReader();  
  6.                 fr.onloadend = function(e) {  
  7.                     document.getElementById("portrait").src = e.target.result;  
  8.                 };  
  9.                 fr.readAsDataURL(file);  
  10.             }  
  11.         }  
  12.     </script>  
  13.   
  14. <input type="file" name="file" onchange="showPreview(this)" />  
  15.                                 <img id="portrait" src="" width="70" height="75">  

 

如果要限定上传文件的类型，可以通过文件选择器获取文件对象并通过type属性来检查文件类型

 

[javascript] view plain copy
  1. if(!/image\/\w+/.test(file.type)){  
  2.     alert("请确保文件为图像类型");  
  3.     return false;  
  4. }  

 

不难发现这个检测是基于正则表达式的，因此可以进行各种复杂的匹配，非常有用。

如果要增加一个进度条，可以使用HTML 5的progress标签，通过下面的代码实现。

 

[html] view plain copy
  1. <form>  
  2.     <fieldset>  
  3.         <legend>分度读取文件：</legend>  
  4.         <input type="file" id="File" />  
  5.         <input type="button" value="中断" id="Abort" />  
  6.         <p>  
  7.             <label>读取进度：</label><progress id="Progress" value="0" max="100"></progress>  
  8.         </p>  
  9.         <p id="Status"></p>  
  10.     </fieldset>  
  11. </form>  

 

[javascript] view plain copy
    1. var h = {  
    2.     init: function() {  
    3.         var me = this;  
    4.            
    5.         document.getElementById('File').onchange = me.fileHandler;  
    6.         document.getElementById('Abort').onclick = me.abortHandler;  
    7.            
    8.         me.status = document.getElementById('Status');  
    9.         me.progress = document.getElementById('Progress');  
    10.         me.percent = document.getElementById('Percent');  
    11.            
    12.         me.loaded = 0;  
    13.         //每次读取1M  
    14.         me.step = 1024 * 1024;  
    15.         me.times = 0;  
    16.     },  
    17.     fileHandler: function(e) {  
    18.         var me = h;  
    19.            
    20.         var file = me.file = this.files[0];  
    21.            
    22.         var reader = me.reader = new FileReader();  
    23.            
    24.         //  
    25.         me.total = file.size;  
    26.            
    27.         reader.onloadstart = me.onLoadStart;  
    28.         reader.onprogress = me.onProgress;  
    29.         reader.onabort = me.onAbort;  
    30.         reader.onerror = me.onerror;  
    31.         reader.onload = me.onLoad;  
    32.         reader.onloadend = me.onLoadEnd;  
    33.         //读取第一块  
    34.         me.readBlob(file, 0);  
    35.     },  
    36.     onLoadStart: function() {  
    37.         var me = h;  
    38.     },  
    39.     onProgress: function(e) {  
    40.         var me = h;  
    41.            
    42.         me.loaded += e.loaded;  
    43.         //更新进度条  
    44.         me.progress.value = (me.loaded / me.total) * 100;  
    45.     },  
    46.     onAbort: function() {  
    47.         var me = h;  
    48.     },  
    49.     onError: function() {  
    50.         var me = h;  
    51.            
    52.     },  
    53.     onLoad: function() {  
    54.         var me = h;  
    55.    
    56.         if(me.loaded < me.total) {  
    57.             me.readBlob(me.loaded);  
    58.         } else {  
    59.             me.loaded = me.total;  
    60.         }  
    61.     },  
    62.     onLoadEnd: function() {  
    63.         var me = h;  
    64.            
    65.     },  
    66.     readBlob: function(start) {  
    67.         var me = h;  
    68.            
    69.         var blob,  
    70.             file = me.file;  
    71.            
    72.         me.times += 1;  
    73.            
    74.         if(file.webkitSlice) {  
    75.             blob = file.webkitSlice(start, start + me.step + 1);  
    76.         } else if(file.mozSlice) {  
    77.             blob = file.mozSlice(start, start + me.step + 1);  
    78.         }  
    79.            
    80.         me.reader.readAsText(blob);  
    81.     },  
    82.     abortHandler: function() {  
    83.         var me = h;  
    84.            
    85.         if(me.reader) {  
    86.             me.reader.abort();  
    87.         }  
    88.     }  
    89. };  
    90.    
    91. h.init();  

 

 

文转： blog.csdn.net/jackfrued/article/details/8967667

posted @ 2017-06-10 17:21  Leroscox  阅读(528)  评论(0)  编辑  收藏  举报