文件（File）接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。
通常情况下， File 对象是来自用户在一个 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象，或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。
File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的 context 中。比如说， FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能处理 Blob 和 File。

一、构造方法

语法:

var myFile = new File(bits, name[, options]);

参数:

bits	一个包含`ArrayBuffer`，`ArrayBufferView`，`Blob`，或者 `DOMString` 对象的 `Array` — 或者任何这些对象的组合。这是 UTF-8 编码的文件内容。
name	`USVString`，表示文件名称，或者文件路径。
options	选项对象，包含文件的可选属性。可用的选项如下： - `type`: `DOMString`，表示将要放到文件中的内容的 MIME 类型。默认值为 `""` 。 - `lastModified`: 数值，表示文件最后修改时间的 Unix 时间戳（毫秒）。默认值为 `Date.now()`。

测试1：使用string创建File对象

前端代码：

$("#new-file").on("click", function() {
        var xhr = new XMLHttpRequest();
        var url = $.rootPath + "file/constructor";
        xhr.open("GET", url);
        xhr.onload = function() {
            var content = xhr.response;
            var file = new File([content], "test.doc", {type: "text/plain"});
            var a = document.createElement("a");
            a.download = "test.doc";
            a.style.dispaly = "none";
            a.href = URL.createObjectURL(file);
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a)
        }
        xhr.send();
    })

后端代码：

@RequestMapping("constructor")
    public String constructor(HttpServletRequest request, HttpServletResponse response) {
        return "测试File API的构造方法";
    }

测试2：使用arraybuffer

前端代码：

$("#new-file-arraybuffer").on("click", function() {
        var xhr = new XMLHttpRequest();
        var url = $.rootPath + "file/constructor";
        xhr.open("GET", url);
        xhr.responseType = "arraybuffer";
        xhr.onload = function() {
            var content = xhr.response;
            var file = new File([content], "test.doc", {type: "text/plain"});
            var a = document.createElement("a");
            a.download = "testArray.doc";
            a.style.dispaly = "none";
            a.href = URL.createObjectURL(file);
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a)
        }
        xhr.send();

    })

后端代码

@RequestMapping("constructor/arraybuffer")
    public String constructorArraybuffer(HttpServletRequest request, HttpServletResponse response) {
        return "测试File API的构造方法";
    }

二、属性

2.1 lastModifiedDate

返回当前文件的最后修改日期,如果无法获取到文件的最后修改日期,则使用当前日期来替代.

// fileInput是一个HTMLInputElement元素: <input type="file" multiple id="myfileinput">
var fileInput = document.getElementById("myfileinput");

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

for (var i = 0; i < files.length; i++) {
  alert(files[i].name + " has a last modified date of " + files[i].lastModifiedDate);
}

2.2 name

返回文件的名称.由于安全原因,返回的值并不包含文件路径.

// fileInput is a HTMLInputElement: <input type="file" multiple id="myfileinput">
var fileInput = document.getElementById("myfileinput");

// files is a FileList object (simliar to NodeList)
var files = fileInput.files;

for (var i = 0; i < files.length; i++) {
  alert("Filename " + files[i].name);
}

2.3 type

返回 File 对象所表示文件的媒体类型（MIME）。

function showType(fileInput) {
  var files = fileInput.files;

  for (var i = 0; i < files.length; i++) {
    var name = files[i].name;
    var type = files[i].type;
    alert("Filename: " + name + " , Type: " + type);
  }
}

三、方法

3.1 继承至Blob的text()方法

var file = new File(["测试继承的text()方法"], "text.doc");
    file.text().then(text => {
        console.log(text);
    })

File学习笔记