HTML5之FileReader的使用 

2016年06月10日 HTML 暂无评论 阅读 33 views 次


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

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

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

[javascript] view plain copy print?
  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. }
if(window.FileReader) {
    var fr = new FileReader();
    // add your code here
}
else {
    alert("Not supported by your browser!");
}

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 print?
  1. fr.onload = function() {
  2.     this.result;
  3. };
fr.onload = function() {
    this.result;
};

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

  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. <input type="file" name="file" onchange="showPreview(this)" />
  14.                                 <img id="portrait" src="" width="70" height="75">
<script type="text/javascript">
		function showPreview(source) {
			var file = source.files[0];
			if(window.FileReader) {
				var fr = new FileReader();
				fr.onloadend = function(e) {
					document.getElementById("portrait").src = e.target.result;
				};
				fr.readAsDataURL(file);
			}
		}
	</script>

<input type="file" name="file" onchange="showPreview(this)" />
								<img id="portrait" src="" width="70" height="75">

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

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

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

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

  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>
<form>
    <fieldset>
        <legend>分度读取文件:</legend>
        <input type="file" id="File" />
        <input type="button" value="中断" id="Abort" />
        <p>
            <label>读取进度:</label><progress id="Progress" value="0" max="100"></progress>
        </p>
        <p id="Status"></p>
    </fieldset>
</form>
[javascript] view plain copy print?
  1. var h = {
  2.     init: function() {
  3.         var me = this;
  4.         document.getElementById('File').onchange = me.fileHandler;
  5.         document.getElementById('Abort').onclick = me.abortHandler;
  6.         me.status = document.getElementById('Status');
  7.         me.progress = document.getElementById('Progress');
  8.         me.percent = document.getElementById('Percent');
  9.         me.loaded = 0;
  10.         //每次读取1M
  11.         me.step = 1024 * 1024;
  12.         me.times = 0;
  13.     },
  14.     fileHandler: function(e) {
  15.         var me = h;
  16.         var file = me.file = this.files[0];
  17.         var reader = me.reader = new FileReader();
  18.         //
  19.         me.total = file.size;
  20.         reader.onloadstart = me.onLoadStart;
  21.         reader.onprogress = me.onProgress;
  22.         reader.onabort = me.onAbort;
  23.         reader.onerror = me.onerror;
  24.         reader.onload = me.onLoad;
  25.         reader.onloadend = me.onLoadEnd;
  26.         //读取第一块
  27.         me.readBlob(file, 0);
  28.     },
  29.     onLoadStart: function() {
  30.         var me = h;
  31.     },
  32.     onProgress: function(e) {
  33.         var me = h;
  34.         me.loaded += e.loaded;
  35.         //更新进度条
  36.         me.progress.value = (me.loaded / me.total) * 100;
  37.     },
  38.     onAbort: function() {
  39.         var me = h;
  40.     },
  41.     onError: function() {
  42.         var me = h;
  43.     },
  44.     onLoad: function() {
  45.         var me = h;
  46.         if(me.loaded < me.total) {
  47.             me.readBlob(me.loaded);
  48.         } else {
  49.             me.loaded = me.total;
  50.         }
  51.     },
  52.     onLoadEnd: function() {
  53.         var me = h;
  54.     },
  55.     readBlob: function(start) {
  56.         var me = h;
  57.         var blob,
  58.             file = me.file;
  59.         me.times += 1;
  60.         if(file.webkitSlice) {
  61.             blob = file.webkitSlice(start, start + me.step + 1);
  62.         } else if(file.mozSlice) {
  63.             blob = file.mozSlice(start, start + me.step + 1);
  64.         }
  65.         me.reader.readAsText(blob);
  66.     },
  67.     abortHandler: function() {
  68.         var me = h;
  69.         if(me.reader) {
  70.             me.reader.abort();
  71.         }
  72.     }
  73. };
  74. h.init();
var h = {
    init: function() {
        var me = this;
         
        document.getElementById('File').onchange = me.fileHandler;
        document.getElementById('Abort').onclick = me.abortHandler;
         
        me.status = document.getElementById('Status');
        me.progress = document.getElementById('Progress');
        me.percent = document.getElementById('Percent');
         
        me.loaded = 0;
        //每次读取1M
        me.step = 1024 * 1024;
        me.times = 0;
    },
    fileHandler: function(e) {
        var me = h;
         
        var file = me.file = this.files[0];
         
        var reader = me.reader = new FileReader();
         
        //
        me.total = file.size;
         
        reader.onloadstart = me.onLoadStart;
        reader.onprogress = me.onProgress;
        reader.onabort = me.onAbort;
        reader.onerror = me.onerror;
        reader.onload = me.onLoad;
        reader.onloadend = me.onLoadEnd;
        //读取第一块
        me.readBlob(file, 0);
    },
    onLoadStart: function() {
        var me = h;
    },
    onProgress: function(e) {
        var me = h;
         
        me.loaded += e.loaded;
        //更新进度条
        me.progress.value = (me.loaded / me.total) * 100;
    },
    onAbort: function() {
        var me = h;
    },
    onError: function() {
        var me = h;
         
    },
    onLoad: function() {
        var me = h;
 
        if(me.loaded < me.total) {
            me.readBlob(me.loaded);
        } else {
            me.loaded = me.total;
        }
    },
    onLoadEnd: function() {
        var me = h;
         
    },
    readBlob: function(start) {
        var me = h;
         
        var blob,
            file = me.file;
         
        me.times += 1;
         
        if(file.webkitSlice) {
            blob = file.webkitSlice(start, start + me.step + 1);
        } else if(file.mozSlice) {
            blob = file.mozSlice(start, start + me.step + 1);
        }
         
        me.reader.readAsText(blob);
    },
    abortHandler: function() {
        var me = h;
         
        if(me.reader) {
            me.reader.abort();
        }
    }
};
 
h.init();

 
用来把文件读入内存,并且读取文件中的数据。FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据。到目前文职,只有FF3.6+和Chrome6.0+实现了FileReader接口。

1、FileReader接口的方法

FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取。无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中。

FileReader接口的方法
方法名 参数 描述
readAsBinaryString file 将文件读取为二进制编码
readAsText file,[encoding] 将文件读取为文本
readAsDataURL file 将文件读取为DataURL
abort (none) 终端读取操作

2、FileReader接口事件

FileReader接口包含了一套完整的事件模型,用于捕获读取文件时的状态。

FileReader接口的事件
事件 描述
onabort 中断
onerror 出错
onloadstart 开始
onprogress 正在读取
onload 成功读取
onloadend 读取完成,无论成功失败

3、FileReader接口的使用

  1. <script type="text/javascript">
  2. var result=document.getElementById("result");
  3. var file=document.getElementById("file");
  4. //判断浏览器是否支持FileReader接口
  5. if(typeof FileReader == 'undefined'){
  6.     result.InnerHTML="<p>你的浏览器不支持FileReader接口!</p>";
  7.     //使选择控件不可操作
  8.     file.setAttribute("disabled","disabled");
  9. }
  10. function readAsDataURL(){
  11.     //检验是否为图像文件
  12.     var file = document.getElementById("file").files[0];
  13.     if(!/image\/\w+/.test(file.type)){
  14.         alert("看清楚,这个需要图片!");
  15.         return false;
  16.     }
  17.     var reader = new FileReader();
  18.     //将文件以Data URL形式读入页面
  19.     reader.readAsDataURL(file);
  20.     reader.onload=function(e){
  21.         var result=document.getElementById("result");
  22.         //显示文件
  23.         result.innerHTML='<img src="' + this.result +'" alt="" />';
  24.     }
  25. }
  26. function readAsBinaryString(){
  27.     var file = document.getElementById("file").files[0];
  28.     var reader = new FileReader();
  29.     //将文件以二进制形式读入页面
  30.     reader.readAsBinaryString(file);
  31.     reader.onload=function(f){
  32.         var result=document.getElementById("result");
  33.         //显示文件
  34.         result.innerHTML=this.result;
  35.     }
  36. }
  37. function readAsText(){
  38.     var file = document.getElementById("file").files[0];
  39.     var reader = new FileReader();
  40.     //将文件以文本形式读入页面
  41.     reader.readAsText(file);
  42.     reader.onload=function(f){
  43.         var result=document.getElementById("result");
  44.         //显示文件
  45.         result.innerHTML=this.result;
  46.     }
  47. }
  48. </script>
  49. <p>
  50.     <label>请选择一个文件:</label>
  51.     <input type="file" id="file" />
  52.     <input type="button" value="读取图像" onclick="readAsDataURL()" />
  53.     <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />
  54.     <input type="button" value="读取文本文件" onclick="readAsText()" />
  55. </p>
  56. <div id="result" name="result"></div>

给我留言

您必须 登录 才能发表留言!

Copyright © 大一网 保留所有权利.  

用户登录

分享到: