File JavaScript 对象如何构建 js的file对象

转载

恋上一只猪 2023-07-27 21:17:56

在 web 中经常需要处理文件，在此梳理一下。

1、file

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

构造函数：File()

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

属性：继承了 Blob 接口的属性

File.lastModified：返回当前 File 对象所引用文件最后修改时间，自 UNIX 时间起始值（1970年1月1日 00:00:00 UTC）以来的毫秒数。只读
File.lastModifiedDate：返回当前 File 对象所引用文件最后修改时间的 Date 对象。只读
File.name：返回当前 File 对象所引用文件的名字。只读
File.size：返回文件的大小。只读
File.webkitRelativePath：返回 File 相关的 path 或 URL。只读
File.type：返回文件的多用途互联网邮件扩展类型（MIME Type）。只读

File 接口没有定义任何方法，但是它从 Blob 接口继承了以下方法：

Blob.slice([start[, end[, contentType]]])：返回一个新的 Blob 对象，它包含有源 Blob 对象中指定范围内的数据。

start：代表 Blob 里的下标，表示第一个会被会被拷贝进新的 Blob 的字节的起始位置，如果是负数，那么这个偏移量将会从数据的末尾从后到前开始计算，它的默认值是0，如果你传入的start的长度大于源 Blob 的长度，那么返回的将会是一个长度为0并且不包含任何数据的一个 Blob 对象
end：将会是被拷贝进新的Blob 的最后一个字节位置，如果负数，那么这个偏移量将会从数据的末尾从后到前开始计算。默认值就是它的原始长度(size).
contentType：给新的 Blob 赋予一个新的文档类型。这将会把它的 type 属性设为被传入的值。它的默认值是一个空的字符串

2、Blob

Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

构造函数：Blob()，new Blob( array, options )

array：是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。
options 是一个可选的BlobPropertyBag字典，可能会指定如下两个属性，type和endings，type，默认值为 ""，它代表了将会被放入到blob中的数组内容的MIME类型endings，默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。它是以下两个值中的一个： "native"，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者 "transparent"，代表会保持blob中保存的结束符不变

属性和方法

Blob.size：Blob 对象中所包含数据的大小（字节）。只读
Blob.type：一个字符串，表明该Blob对象所包含数据的MIME类型。如果类型未知，则该值为空字符串。只读
Blob.slice([start,[ end ,[contentType]]])：返回一个新的 Blob对象，包含了源 Blob对象中指定范围内的数据。

3、FileReader

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

构造函数：new FileReader()
属性：

FileReader.error，一个DOMException，表示在读取文件时发生的错误。只读
FileReader.readyState：表示FileReader状态的数字。取值如下：0（EMPTY，还没有加载任何数据），1（LOADING，数据正在被加载），2（DONE，已完成全部的读取请求）。只读
FileReader.result：文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。只读

事件处理：

FileReader.onabort：处理abort事件。该事件在读取操作被中断时触发
FileReader.onerror：处理error事件。该事件在读取操作发生错误时触发
FileReader.onload：处理load事件。该事件在读取操作完成时触发
FileReader.onloadstart：处理loadstart事件。该事件在读取操作开始时触发
FileReader.onloadend：处理loadend事件。该事件在读取操作结束时（要么成功，要么失败）触发
FileReader.onprogress：处理progress事件。该事件在读取Blob时触发
因为 FileReader 继承自EventTarget，所以所有这些事件也可以通过addEventListener方法使用。

方法：

FileReader.abort()：中止读取操作。在返回时，readyState属性为DONE。对一个没有正在进行读取操作（readyState 不是LOADING）的 FileReader 进行 abort 操作，会抛出 DOM_FILE_ABORT_ERR 错误。
FileReader.readAsArrayBuffer(blob|file)：用于启动读取指定的 Blob 或 File 内容。当读取操作完成时，readyState 变成 DONE（已完成），并触发 loadend 事件，同时 result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据。
FileReader.readAsBinaryString(blob|file)：读取指定的 Blob 或 File 对象，当读取完成的时候，readyState 会变成DONE（已完成），并触发 loadend 事件，同时 result 属性将包含所读取文件原始二进制格式。从 2012 年 7 月 12 日起，该方法已从 W3C 工作草案废除。
FileReader.readAsDataURL(blob|file)：读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。
FileReader.readAsText(blob|file[, encoding])：可以将 Blob 或者 File 对象根据特殊的编码格式转化为内容(字符串形式)，第二个参数是字符串的编码类型，如缺省，则默认为“utf-8”类型。
这个方法是异步的，也就是说，只有当执行完成后才能够查看到结果，如果直接查看是无结果的，并返回undefined。必须要挂载在实例的 onload 或 onloadend 的方法处理中。当转化完成后， readyState 这个参数就会转换为 done 即完成态， event("loadend，load") 挂载的事件会被触发，result属性中将包含一个字符串以表示所读取的文件内容，也可以在事件处理程序的event参数中的event.target.result

4、URL

URL.createObjectURL(File|Blob|MediaSource) 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL（可以指定img,iframe 的src属性）。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
URL.revokeObjectURL(objectURL);在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。浏览器会在文档退出的时候自动释放它们。

MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/File/Using_files_from_web_applications

5、例子

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

fileInput = document.getElementById('input');
const selectedFile = fileInput.files[0];  // 获取文件
fileInput.value = ''; // 清空文件

var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // 一个包含DOMString的数组
    var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // 得到 blob

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

    //从 Blob 中提取数据，从Blob中读取内容的唯一方法是使用 FileReader
    // 一个文件上传的回调 <input type="file" onchange="onChange(event)">
    function onChange(event) {
        var file = event.target.files[0];
        var reader = new FileReader();
        reader.onload = function(event) {
            // 文件里的文本会在这里被打印出来
            console.log(event.target.result)
        };

        reader.readAsText(file);
    }

    var file = new File(["foo"], "foo.txt", {
        type: "text/plain",
    });
    console.log(file);

图片回显

function handleFiles(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"就是用来显示内容的div
    
    var reader = new FileReader();
    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
    reader.readAsDataURL(file);
  }
}

使用 URL.createObjectURL

function handleFiles(files) {
  if (!files.length) {
    fileList.innerHTML = "<p>No files selected!</p>";
  } else {
    fileList.innerHTML = "";
    var list = document.createElement("ul");
    fileList.appendChild(list);
    for (var i = 0; i < files.length; i++) {
      var li = document.createElement("li");
      list.appendChild(li);
      
      var img = document.createElement("img");
      img.src = window.URL.createObjectURL(files[i]);
      img.height = 60;
      img.onload = function() {
        window.URL.revokeObjectURL(this.src);
      }
      li.appendChild(img);
      var info = document.createElement("span");
      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
      li.appendChild(info);
    }
  }
}

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。