一、FileReader

FileReader 对象允许Web应用程序异步读取存储在用户计算机中的文件（或缓冲区的原始数据），使用File或Blob对象指定要读取的文件或数据。

1.1 实例化

var reader = new FileReader()

1.2 事件类型

  • FileReader.onload

    • 每次成功完成读取操作完成时触发loading事件

  • FileReader.onprogress

    • 读取Blob 内容时触发进度 progress 事件

1.3 方法

  • FileReader.readAsDataURL()

    • 开始读取指定的Blob内容，完成后，result 属性包含一个用URL表示的文件数据。

  • FileReader.readAsArrayBuffer()

    • 开始读取指定的Blob内容，完成后，result 属性包含一个用 ArrayBuffer 表示的文件数据。

      HTML

      1. <input type="file" onchange="previewFile()"><br>
      2. <img src="" height="200" alt="Image preview..."
      3. JavaScript
      4.  
      5. function previewFile() {
      6.   var preview = document.querySelector('img');
      7.   var file    = document.querySelector('input[type=file]').files[0];
      8.   var reader  = new FileReader();
      9.   reader.addEventListener("load", function () {
      10.     preview.src = reader.result;
      11.   }, false);
      12.   if (file) {
      13.     reader.readAsDataURL(file);
      14.   }
      15. }

  • FileReader.readAsText()

    • 开始读取指定的Blob内容，完成后，result 将文件的内容作为一个文本字符串。

二、在Web 应用中使用files对象

2.1 访问所选文件

  1. <input multiple id="upload_input" type="file" accept="image/*" />
  1. 使用原生DOM选择器获取元素
  1. var files = document.getElementById('upload_input').files;

files 是一个对象，包含着所选文件列表的信息和一个 length 属性

  1. > console.log(files);
  2. < FileList {0: File, 1: File, 2: File, length: 3}
  3. <FileList
  4.     0:File
  5.         lastModified:1481789988885
  6.         lastModifiedDate:Thu Dec 15 2016 16:19:48 GMT+0800 (中国标准时间)
  7.         name:"my_order.png"
  8.         size:93453
  9.         type:"image/png"
  10.         webkitRelativePath:""
  11.     1:File
  12.     2:File
  13.     length:3

2.2 通过change 事件访问所选文件

  1. var inputElement = document.getElementById("input");
  2. inputElement.addEventListener("change", handleFiles, false);
  3. function handleFiles() {
  4.     var fileList = this.files; /* now you can work with the file list */
  5. }

2.3 获取所选文件的基本信息

访问files对象的自带的length属性，得到被选择文件的个数：

  1. var numFiles = files.length;

可以通过数组列表，检索出被选择的单个文件：

  1. for (var i = 0, numFiles = files.length; i < numFiles; i++) {
  2.   var file = files[i];
  3.   ..
  4. }

每个 file 对象拥有三个属性，包含着文件的name,size,type

name：文件名，只读，不包含文件路径；

size：文件字节数，64-bit 整型；例如92kb 的文件，它的size = 92 * 1024 b;

type：文件的MIME类型，若不确定则为“”（空）。

2.4 使用click 方法隐藏 input 元素

  1. <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
  2. <a href="#" id="fileSelect">Select some files</a>

给隐藏的 input 增加事件

  1. var fileSelect = document.getElementById('fileSelect'),
  2.     fileEle = document.getElementById('fileElem');
  3. fileSelect.addEventListener('click', function(e) {
  4.     if(fileEle) {
  5.         fileEle.click();
  6.     }
  7. }, false)

三、实例

3.1 显示用户选中图片的缩略图

  1. var showThumbnails = function (files) {
  2.     for(var i = 0; i < files.length; i++) {
  3.         var file = files[i];
  4.         var imageType = /^image\//;
  5. ​
  6.         if(!imageType.test(file.type)) {
  7.             continue;
  8.         }
  9.         var img = document.createElement('img');
  10.         img.classList.add('obj');
  11.         img.file = file;
  12.         preview.appendChild(img); // 假设preview是缩略图的展示位置
  13. ​
  14.         var reader = new FileReader();
  15.         reader.readAsDataURL(file);
  16.         reader.onload = (function (aImg) {
  17.             return function (e) {
  18.                 aImg.src = e.target.result; // e.target 指向 reader
  19.             }
  20.         })(img)
  21.     }
  22. }

每个缩略图都添加了一个 obj 的类名，方便后期查找。还向每个图像指定了一个指向文件的file属性，以供稍后实际上传，然后用Node.appendChild() 将新的缩略图添加到预览区域。

紧接着，我们实例化了一个 FileReader 来处理异步加载图像并将其附加到img 元素上。调用readAsDataURL() 在后台启动读取操作，图像加载完毕，它们将被转换为传递给onload回调的数据：URL。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  6.     <title></title>
  7. </head>
  8. <body>
  9. <div class="logo">
  10.     <img src="111.png" />
  11. </div>
  12. <div class="upload">
  13.     <p>上传图片</p>
  14.     <form>
  15.         <input multiple id="upload_input" type="file" />
  16.     </form>
  17. </div>
  18. </body>
  19. <script>
  20.     window.onload = function () {
  21.         var Upload = {
  22.             change: function () {
  23.                 var oform = document.querySelector('form'),
  24.                     oFiles = document.getElementById('upload_input').files;
  25.                 console.log(oFiles)
  26.                 for(var key in oFiles) {
  27.                     if(oFiles.hasOwnProperty(key)) {
  28.                         console.log('file_name:'+oFiles[key].name);
  29.                         console.log('file_size:'+oFiles[key].size);
  30.                         console.log('file_type:'+oFiles[key].type);
  31.                     }
  32.                 }
  33.             }
  34.         };
  35.         document.getElementById('upload_input').addEventListener('change',Upload.change);
  36.     }
  37. </script>
  38. </html>

HTML 5 使用 FileReader、FormData实现文件上传的更多相关文章

  1. Multipart/form-data POST文件上传详解

    Multipart/form-data POST文件上传详解 理论 简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form ...

  2. Multipart/form-data POST文件上传详解(转)

    Multipart/form-data POST文件上传详解 理论 简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form ...

  3. 构建multipart/form-data实现文件上传

    构建multipart/form-data实现文件上传 通常文件上传都是通过form表单中的file控件,并将form中的content-type设置为multipart/form-data.现在我们 ...

  4. FormData实现文件上传实例

    单提交,文件上传是一个常用又十分麻烦的功能,以前要上传文件通常都是借助插件或者flash来实现,噼里啪啦的加载一大堆东西.自从有了HTML5的FormData后,老板再也不用担心我的上传了. Form ...

  5. HTML5 FormData实现文件上传实例

    表单提交,文件上传是一个常用又十分麻烦的功能,以前要上传文件通常都是借助插件或者flash来实现,噼里啪啦的加载一大堆东西.自从有了HTML5的FormData后,老板再也不用担心我的上传了. For ...

  6. iframe 模拟ajax文件上传and formdata ajax 文件上传

    对于文件上传 有好多种方式,一直想总结 文件上传的方法 今天就来写下 iframe  的文件上传的代码 本人语言表达能里有限,不多说了 直接上代码. 首先看 总体页面. 总共就三个文件. 实际上也就是 ...

  7. spring mvc利用MultipartResolver解析Multipart/form-data进行文件上传

    之前的表单数据都是文本数据,现记录:利用MultipartResolver进行文件上传. ①首先,需引入commons-fileUpload和commons-io jar包,pom.xml文件的坐标: ...

  8. Multipart/form-data POST文件上传

    简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form method="post"action=&qu ...

  9. vue使用formData进行文件上传

    本文为博主原创,未经允许不得转载 1.vue页面 <ux-form ref="formRef" layout="vertical"> <ux- ...

  10. .NET和.NET Core Web APi FormData多文件上传对比

    前言 最近因维护.NET和.NET Core项目用到文件上传功能,虽说也做过,但是没做过什么对比,借此将二者利用Ajax通过FormData上传文件做一个总结,通过视图提交表单太简单,这里不做阐述,希 ...

随机推荐

  1. laravel中if

    1.控制器 2.模板

  2. linux tty设置详解

    http://blog.csdn.net/againyuan/article/details/3905380 linux串口termios NAME termios, tcgetattr, tcset ...

  3. 让QQ好友现形

    方法一 现在使用QQ的朋友,越来越注重保护自己的个人信息,如果对方将个人资料设置为保密你就无法看到对方的资料了,而这位好友如果又有着不断变换昵称的不良习惯,那么随着QQ好友名单的不断增加,时间一长,你 ...

  4. 2018.10.19 bzoj1057: [ZJOI2007]棋盘制作（悬线法）

    传送门 悬线法板题. 如果只求最大矩形面积那么跟玉蟾宫是一道题. 现在要求最大正方形面积. 所以每次更新最大矩形面积时用矩形宽的平方更新一下正方形答案就行了. 代码: #include<bits ...

  5. dev ChartControl 备忘

    一个chartControl 里包括以个diagram(图表) diagram里可以设置 x-axis与y-axis ,另外还可以设置SecondaryXAxis与SecondaryYAxis,在Se ...

  6. k8s的port、targetport、nodeport之间的区别

    先看举例: k8s集群中跑着一个tomcat服务,tomcat容器expose的端口为8080 apiVersion: v1 kind: Service metadata: name: tomcat- ...

  7. Java中读取.properties配置文件的通用类

    由于Java中读取配置文件的代码比较固定,所以可以将读取配置文件的那部分功能单独作为一个类,以后可以复用.为了能够达到复用的目的,不能由配置文件中每一个属性生成一个函数去读取,我们需要一种通用的方法读 ...

  8. spring AbstractRoutingDataSource实现动态数据源切换

    使用Spring 提供的 AbstractRoutingDataSource 实现 创建 AbstractRoutingDataSource 实现类,负责保存所有数据源与切换数据源策略:public ...

  9. C语言中 指针的基础知识总结, 指针数组的理解

    1: 指针变量所占的字节数与操作系统为位数有关,64位操作系统下,占8个字节,32位操作系统下,占4个字节 2: 指针变量的本质是用来放地址,而一般的变量是放数值的3: 脱衣服法则: a[2] 变成 ...

  10. null 解决方法

    在iOS开发过程中经常需要与服务器进行数据通讯,Json就是一种常用的高效简洁的数据格式. 问题现象 但是几个项目下来一直遇到一个坑爹的问题,程序在获取某些数据之后莫名崩溃.其实很早就发现了原因:由于 ...