下载文件详解

一、FileList

一个 FileList 对象通常来自于一个 HTML 元素的 files 属性，你可以通过这个对象访问到用户所选择的文件。在 Gecko 1.9.2 之前,通过 input 元素，每次只能选择一个文件，这意味着该 input 元素的 files 属性上的 FileList 对象无论如何都只能包含一个文件。从Gecko 1.9.2 开始，如果一个 input 元素拥有 multiple 属性，则可以用它来选择多个文件。

1. FileList的使用

所有type属性(attribute)为file的 <input> 元素都有一个files属性(property),用来存储用户所选择的文件，例如：

<input id="fileItem" type="file">

下面的一行代码演示如何获取到一个FileList对象中的第一个文件(File 对象):

var file = document.getElementById('fileItem').files[0];

1. 方法概述

File item(index)
index是File 对象在 FileList 对象中的索引值，从 0 开始。

1. 示例： ```bash // fileInput 是一个 HTML input 元素: var fileInput = document.getElementById(“myfileinput”);

// files 是一个 FileList 对象(类似于NodeList对象) var files = fileInput.files; var file;

// 遍历所有文件 for (var i = 0; i < files.length; i++) {

// 取得一个文件
file = files.item(i);
// 这样也行
file = files[i];
// 取得文件名
alert(file.name);

}

<a name="4tpgs"></a>
#### 二、Blob
`Blob`** **对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 [`ReadableStream`](https://developer.mozilla.org/zh-CN/docs/Web/API/ReadableStream) 来用于数据操作。 <br />Blob 表示的不一定是JavaScript原生格式的数据。[`File`](https://developer.mozilla.org/zh-CN/docs/Web/API/File) 接口基于`Blob`，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。<br />要从其他非blob对象和数据构造一个 `Blob`，请使用 [`Blob()`](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/Blob) 构造函数。要创建一个 blob 数据的子集 blob，请使用 [`slice()`](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/slice) 方法。要获取用户文件系统上的文件对应的 `Blob` 对象，请参阅 [`File`](https://developer.mozilla.org/zh-CN/docs/Web/API/File) 文档。<br />接受 `Blob` 对象的API也被列在 [`File`](https://developer.mozilla.org/zh-CN/docs/Web/API/File) 文档中。（**注意：**`slice()` 方法原本接受 `length` 作为第二个参数，以表示复制到新 `Blob` 对象的字节数。如果设置的参数使 `start + length` 超出了源 `Blob` 对象的大小，则返回从开始到结尾的所有数据。）
1. 构造函数[`Blob(blobParts[, options])`](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/Blob)
返回一个新创建的 `Blob` 对象，其内容由参数中给定的数组串联组成。
2. 属性
   1. `[Blob.size](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/size)：   Blob 对象中所包含数据的大小（字节）`
   1. `Blob.type ： 一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串<br />`
3. 方法
[`Blob.slice([start[, end[, contentType]]])`](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/slice)返回一个新的 `Blob` 对象，包含了源 `Blob` 对象中指定范围内的数据。<br />[`Blob.stream()`](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/stream)返回一个能读取blob内容的 [`ReadableStream`](https://developer.mozilla.org/zh-CN/docs/Web/API/ReadableStream)。<br />[`Blob.text()`](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/text)返回一个promise且包含blob所有内容的UTF-8格式的 [`USVString`](https://developer.mozilla.org/zh-CN/docs/Web/API/USVString)。<br />[`Blob.arrayBuffer()`](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/arrayBuffer)返回一个promise且包含blob所有内容的二进制格式的 [`ArrayBuffer`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)
4. Blob构造函数用法
```bash
var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});

1. 使用Blob创建指向类型化数组的URL

   var typedArray = GetTheTypedArraySomehow();
   var blob = new Blob([typedArray.buffer], {type: 'application/octet-stream'}); // 传入一个合适的 MIME 类型
   var url = URL.createObjectURL(blob);
   // 会产生一个类似 blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串
   // 你可以像使用普通 URL 那样使用它，比如用在 img.src 上。

   三、File

   通常情况下， File 对象是来自用户在一个 <input> 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象，或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。在Gecko中，特权代码可以创建代表任何本地文件的File对象，而无需用户交互。File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的 context 中。比说， FileReader, URL.createObjectURL(), createImageBitmap() (en-US), 及 XMLHttpRequest.send()) 都能处理 Blob 和File。

2. 构造函数

File()返回一个新构建的文件对象（File）

1. 属性

File 接口也继承了 Blob 接口的属性：
File.lastModified 只读 返回当前 File 对象所引用文件最后修改时间，
File.lastModifiedDate 只读 返回当前 File 对象所引用文件最后修改时间的 [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) 对象。
File.name 只读返回当前 File 对象所引用文件的名字。
File.size 只读返回文件的大小。

1. 方法

File 接口没有定义任何方法，但是它从 Blob 接口继承了以下方法：
Blob.slice([start[, end[, contentType]]])返回一个新的 Blob 对象，它包含有源 Blob 对象中指定范围内的数据。

四、访问被选择的文件

考虑这段 HTML:

<input type="file" id="input">

通过 File API，我们可以访问 FileList，它包含了表示用户所选文件的 File 对象
如果用户只选择了一个文件，那么只需要考虑列表中的第一个文件。
使用传统的 DOM 选择器访问一个被选择的文件：

const selectedFile = document.getElementById('input').files[0];

1. 使用对象URL来访问

Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)引入了对DOM window.URL.createObjectURL() (en-US) 和 window.URL.revokeObjectURL() (en-US) 方法的支持。这使得你可以创建用于引用任何数据的简单URL字符串，也可以引用一个包括用户电脑上的本地文件的DOM File对象。
当你需要在HTML中通过URL来引用一个File对象时，你可以创建一个对象URL，就像这样：

var objectURL = window.URL.createObjectURL(fileObj);

五、下载文件

在前端项目开发的时候，系统支持文件下载是前端开发中常用到的功能之一，当用户访问我们的网站时发现有自己需要的资源时可以将资源下载下来。文件下载主要有两种形式，一种是通过文件地址下载，该文件可以存放在前端或者后端。另一种则是通过文件流下载，前端通过发送请求给后端并获取后端文件流进行下载。文件下载的方法有很多比如a标签下载，非a标签下载（例如点击button下载数据），iframe下载，form表单提交下载等等

1. 非a标签下载

一般来说前端实现的思路就是通过动态创建a标签，设置其download属性，最后删除a就好了，对于不是图片的文件一般都可以下载，但是如果是图片，有些浏览器会自动打开图片，所以我们需要手动把它转化为data:URLs或blob:URLs，基于这个原理，我们可以用fileReader，也可以用fetch-URL.createObjectURL

               //创建a标签
        let a = document.createElement('a');
        //将a标签添加到dom中
        document.body.appendChild(a)
        //创建用于引用任何数据的简单URL字符串
        let url = window.URL.createObjectURL(blob);
        //将url给a标签
        a.href = url;
        //给下载的文件取名
        a.download = filename;
        // 定义事件来触发下载（浏览器触发）
        a.click();
        // 下载完成删除a标签
        document.body.removeChild(a)
        // 释放blob对象
        window.URL.revokeObjectURL(url);