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

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

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

  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 ,否则即是读取的结果,绝大多数的程序都会在成功读取文件的时候,抓取这个值。

  1. fr.onload = function() {
  2. this.result;
  3. };

下面通过一个上传图片预览和带进度条上传来展示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">

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

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

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

如果要增加一个进度条,可以使用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>
    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();

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

HTML5之FileReader的使用.RP的更多相关文章

  1. 网站开发进阶(三十二)HTML5之FileReader的使用

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

  2. HTML5 之 FileReader 方法上传并读取文件

    原文地址:https://caochangkui.github.io/file-upload/ HTML5 的 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据 ...

  3. HTML5之FileReader的使用

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

  4. html5使用FileReader上传图片

    客户端代码是网上找的,修改为.net代码. <html><head>    <meta charset="utf-8">    <titl ...

  5. HTML5 使用FileReader实现调用相册、拍照功能

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

  6. HTML5 通过 FileReader 实现文件上传

    概述 在页面中上传时,之前一般都是需要使用form表单进行上传.html5 中提供了FileReader 可以将文件转换成Base64编码字符串,因此就可以直接使用 AJAX实现文件上传. 实现代码 ...

  7. [转] HTML5之FileReader的使用

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

  8. HTML5之fileReader异步读取文件及文件切片读取

    fileReader的方法与事件 fileReade实现图片预加载 fileReade实现文件读取进度条 fileReade的与file.s实现文件切片读取 一.fileReader的方法与事件 1. ...

  9. HTML5 之 FileReader 的使用 (二) (网页上图片拖拽并且预显示可在这里学到) [转载]

    转载至 : http://www.360doc.com/content/14/0214/18/1457948_352511645.shtml FileReader 资料(英文): https://de ...

随机推荐

  1. STM32 -- 硬件知识

    一.网站资源 1.http://www.stmcu.com.cn/   二.硬件 1.BOOT0 和 BOOT1  1)一般BOOT0和BOOT1跳线都跳到0(地): 只是在ISP下载的情况下,BOO ...

  2. 【转】 Pro Android学习笔记(八四):了解Package(3):包间数据共享

    目录(?)[-] 共享User ID的设置 共享资源例子 文章转载只能用于非商业性质,且不能带有虚拟货币.积分.注册等附加条件.转载须注明出处:http://blog.csdn.net/flowing ...

  3. Dubbo实现RPC调用使用入门

    使用Dubbo进行远程调用实现服务交互,它支持多种协议,如Hessian.HTTP.RMI.Memcached.Redis.Thrift等等.由于Dubbo将这些协议的实现进行了封装了,无论是服务端( ...

  4. AngularJS:Bootstrap

    ylbtech-AngularJS:Bootstrap 1.返回顶部 1. AngularJS Bootstrap AngularJS 的首选样式表是 Twitter Bootstrap, Twitt ...

  5. python IOError: windows directory not found at xxxxx win32

    您需要修改 PATH 环境变量,将Python的可执行程序及额外的脚本添加到系统路径中.将以下路径添加到 PATH 中: C:\Python2.7\;C:\Python2.7\Scripts\;请打开 ...

  6. [转]在 Windows 操作系统中的已知安全标识符(Sid security identifiers)

    安全标识符 (SID) 是用于标识安全主体或安全组在 Windows 操作系统中的可变长度的唯一值.常用 Sid 的 Sid 标识普通用户的一组或通用组.跨所有操作系统,它们的值保持不变. 此信息可用 ...

  7. redmine2.3环境搭建

    1. 安装redmine bitnami-redmine-2.3.0-0-windows-installer.exe安装到C:\BitNami\redmine-2.3.0-0目录下. 其中redmin ...

  8. vue日常练习一

    <html lang="en"> <head> <meta charset="UTF-8"> <title>Ti ...

  9. 问题:只能在执行 Render() 的过程中调用 RegisterForEventValidation;结果:只能在执行 Render() 的过程中调用 RegisterForEventValidation

    只能在执行 Render() 的过程中调用 RegisterForEventValidation 当在导出Execl或Word的时候,会发生只能在执行 Render() 的过程中调用 Register ...

  10. leetcode633

    用开方的思想来解题. bool judgeSquareSum(int c) { int h = pow(c, 0.5); ; i <= h; i++) { ), 0.5); if (left - ...