一、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

      <input type="file" onchange="previewFile()"><br>
      
<img src="" height="200" alt="Image preview..."
      
JavaScript

function previewFile() {
      
  var preview = document.querySelector('img');
      
  var file    = document.querySelector('input[type=file]').files[0];
      
  var reader  = new FileReader();
      
  reader.addEventListener("load", function () {
      
    preview.src = reader.result;
      
  }, false);
      
  if (file) {
      
    reader.readAsDataURL(file);
      
  }
      
}

  • FileReader.readAsText()

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

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

2.1 访问所选文件

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

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

> console.log(files);

< FileList {0: File, 1: File, 2: File, length: 3}

<FileList

    0:File

        lastModified:1481789988885

        lastModifiedDate:Thu Dec 15 2016 16:19:48 GMT+0800 (中国标准时间)

        name:"my_order.png"

        size:93453

        type:"image/png"

        webkitRelativePath:""

    1:File

    2:File

    length:3

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

var inputElement = document.getElementById("input");

inputElement.addEventListener("change", handleFiles, false);

function handleFiles() {

    var fileList = this.files; /* now you can work with the file list */

}

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

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

var numFiles = files.length;

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

for (var i = 0, numFiles = files.length; i < numFiles; i++) {

  var file = files[i];

  ..

}

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

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

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

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

2.4 使用click 方法隐藏 input 元素

<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">

<a href="#" id="fileSelect">Select some files</a>

给隐藏的 input 增加事件

var fileSelect = document.getElementById('fileSelect'),

    fileEle = document.getElementById('fileElem');

fileSelect.addEventListener('click', function(e) {

    if(fileEle) {

        fileEle.click();

    }

}, false)

三、实例

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

var showThumbnails = function (files) {

    for(var i = 0; i < files.length; i++) {

        var file = files[i];

        var imageType = /^image\//;

​

        if(!imageType.test(file.type)) {

            continue;

        }

        var img = document.createElement('img');

        img.classList.add('obj');

        img.file = file;

        preview.appendChild(img); // 假设preview是缩略图的展示位置

​

        var reader = new FileReader();

        reader.readAsDataURL(file);

        reader.onload = (function (aImg) {

            return function (e) {

                aImg.src = e.target.result; // e.target 指向 reader

            }

        })(img)

    }

}

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

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

    <title></title>

</head>

<body>

<div class="logo">

    <img src="111.png" />

</div>

<div class="upload">

    <p>上传图片</p>

    <form>

        <input multiple id="upload_input" type="file" />

    </form>

</div>

</body>

<script>

    window.onload = function () {

        var Upload = {

            change: function () {

                var oform = document.querySelector('form'),

                    oFiles = document.getElementById('upload_input').files;

                console.log(oFiles)

                for(var key in oFiles) {

                    if(oFiles.hasOwnProperty(key)) {

                        console.log('file_name:'+oFiles[key].name);

                        console.log('file_size:'+oFiles[key].size);

                        console.log('file_type:'+oFiles[key].type);

                    }

                }

            }

        };

        document.getElementById('upload_input').addEventListener('change',Upload.change);

    }

</script>

</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. qt基本类

    多firstpage secondpage thirdpage fouthpage  实现 多页面 xml解析 实现 按钮 和 slot实现 mysql数据库访问实现

  2. 设计神器 - 摹客设计系统上线了 | 晒出你的设计规范，赢iPad Pro！

    在国内,设计规范也许还是个不太常用的概念,但是如果你正好有参与互联网公司的产品设计,你应该早就已经体会到设计规范的重要性了.UI设计师总是要花费大量的时间和精力向开发描述一大堆设计细节,但是产品最后呈 ...

  3. linux下集成开发环境之ECLIPSE--在线调试、编译程序

    裸机开发流程 1.编写裸机程序:2.调试裸机程序:3.生成2进制映象(编译.链接.格式转换):4.烧写/运行2进制映象. 注意:我们自己开发的程序等等需要下载到开发板的Nandflash(类似于硬盘功 ...

  4. 【Jsoup】Jsoup解析Html标签(Java后台解析)

    中文API网站(下载地址): http://www.open-open.com/jsoup/ 有时候编辑器传到后台的内容是带Html标签的,或者有时候需要形成一个完整的Html文档,也或者需要解析其中 ...

  5. 2018.10.18 NOIP训练 ZUA球困难综合征（线段树）

    传送门 考虑到模数等于7 * 13 * 17 * 19. 那么只需要维护四棵线段树求出每个数处理之后模7,13,17,197,13,17,197,13,17,19的值再用crtcrtcrt合并就行了. ...

  6. 2018.07.08 NOIP模拟 好数（线段树）

    好数 题目背景 SOURCE:NOIP2016-AHSDFZ T3 题目描述 我们定义一个非负整数是"好数",当且仅当它符合以下条件之一: 1. 这个数是 0 或 1 . 2. 所 ...

  7. java多线程同步（转）

    原文地址:http://developer.51cto.com/art/201509/490965.htm 一.场景 因为当我们有多个线程要同时访问一个变量或对象时,如果这些线程中既有读又有写操作时, ...

  8. VIM 正则表达式详解及与 perl 正则的区别

    转载自:http://www.xuebuyuan.com/806332.html:个人进行了一些修正和添加. 下面我们对 VIM 正则表达式进行介绍并会显示指出其与 Perl 正则的不同之处. 字符集 ...

  9. “无后端”的web应用开发模式

    最近看到前端趋势2013大会上的一篇文章,题目是<各位快看,不用后端>,觉得有点意思,恰好近期的一次讨论及半年前的一次开发实践也涉及到这种模式,简单谈谈我的想法. 不得不说,文章的题目确实 ...

  10. 1) Apache Maven 's README.txt

    Apache Maven What is it? ----------- Maven is a software project management and comprehension tool. ...