JS处理文件

最新推荐文章于 2024-08-25 21:44:45 发布

书香水墨

最新推荐文章于 2024-08-25 21:44:45 发布

阅读量1.6k

点赞数 3

分类专栏：前端文章标签： JS

本文链接：https://blog.csdn.net/qq_27870421/article/details/89890400

版权

前端专栏收录该内容

178 篇文章 7 订阅

订阅专栏

JS处理文件

相关类 FileList、File、FileReader、Blob、FileError、ProgressEvent、ArrayBuffer、FormData

Blob

Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
要从其他非blob对象和数据构造一个Blob，请使用 Blob() 构造函数。要创建包含另一个blob数据的子集blob，请使用 slice()方法。要获取用户文件系统上的文件对应的Blob对象，请参阅 File文档。
接受Blob对象的API也被列在 File 文档中。

构造函数

Blob(array, options );
返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
参数:

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

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

属性

Blob.size 只读
Blob 对象中所包含数据的大小（字节）。

Blob.type 只读
一个字符串

方法

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

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

File

文件（File）接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。
通常情况下， File 对象是来自用户在一个 <input> 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象，或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。在Gecko中，特权代码可以创建代表任何本地文件的File对象，而无需用户交互（有关详细信息，请参阅注意事项。
File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的 context 中。比如说， FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能处理 Blob 和 File。

属性

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）

方法

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

FileReader

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

属性

FileReader.error 只读
一个DOMException，表示在读取文件时发生的错误。

FileReader.readyState 只读
表示FileReader状态的数字。取值如下：

常量名	值	描述
EMPTY	0	还没有加载任何数据.
LOADING	1	数据正在被加载.
DONE	2	已完成全部的读取请求

FileReader.result 只读
文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。

方法

FileReader.abort()
中止读取操作。在返回时，readyState属性为DONE。

FileReader.readAsArrayBuffer()
开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.

FileReader.readAsBinaryString()
开始读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。

FileReader.readAsDataURL()
开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。

FileReader.readAsText()
开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。

事件处理

FileReader.onabort
处理abort事件。该事件在读取操作被中断时触发。

FileReader.onerror
处理error事件。该事件在读取操作发生错误时触发。

FileReader.onload
处理load事件。该事件在读取操作完成时触发。

FileReader.onloadstart
处理loadstart事件。该事件在读取操作开始时触发。

FileReader.onloadend
处理loadend事件。该事件在读取操作结束时（要么成功，要么失败）触发。

FileReader.onprogress
处理progress事件。该事件在读取Blob时触发。

ProgressEvent

这个 ProgressEvent 接口用来表示测量底层操作一个HTTP请求的进度（例如：一个 XMLHttpRequest、一个底层资源像 <img>, <audio>, <video>, <style> or <link>).
同时继承它的父元素 Event 的属性以及方法。

属性

ProgressEvent.lengthComputable 只读
它是一个布尔值标识，表明总共需要完成的工作量和已经完成的工作是否可以被底层所计算到。换而言之，它表示的就是过程是否是可以测量的。

ProgressEvent.loaded 只读
是一个unsigned long long类型，表示底层进程已经执行的工作量。所做的工作比率可以用属性和ProgressEvent.total计算。当使用HTTP下载资源时，这只表示内容本身的一部分，而不是头和其他开销。

ProgressEvent.total 只读
是unsigned long long类型，表示底层进程正在执行的工作总量。当使用HTTP下载资源时，这只表示内容本身，而不是头和其他开销

示列

下面的例子向一个新的 XMLHTTPRequest 请求添加了一个 ProgressEvent，并且用它来显示这个请求的状态。

var progressBar = document.getElementById("p"),
      client = new XMLHttpRequest()
  client.open("GET", "magical-unicorns")
  client.onprogress = function(pe) {
    if(pe.lengthComputable) {
      progressBar.max = pe.total
      progressBar.value = pe.loaded
    }
  }
  client.onloadend = function(pe) {
    progressBar.value = pe.loaded
  }
  client.send()

FileError

用来表示在使用FileReader接口时发生的错误.

属性

属性名	类型	描述
code	unsigned short	The error code.

Error codes

常量	值	描述
ABORT_ERR	3	文件的操作命令被取消,可能是由于调用了FileReader的abort()方法.
ENCODING_ERR	5	文件数据不能准确的被表示为一个data URI.
NOT_FOUND_ERR	1	找不到文件.
NOT_READABLE_ERR	4	文件无法被读取.
SECURITY_ERR	2	由于安全原因,文件不能被访问.

FormData

FormData 接口提供了一种表示表单数据的键值对的构造方式，经过它的数据可以使用 XMLHttpRequest.send() 方法送出，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 “multipart/form-data”，它会使用和表单一样的格式。

方法

FormData.append(name, value, filename)
将新值附加到FormData对象内的现有键上，或者添加该键（如果该键尚不存在）。

FormData.delete(name)
从FormData对象中删除键/值对。

FormData.entries()
返回iterator允许遍历此对象中包含的所有键/值对。

FormData.get(name)
返回与FormData对象内的给定键关联的第一个值。

FormData.getAll(name)
返回与a中给定键关联的所有值的数组FormData。

FormData.has(name)
返回一个布尔值，指出FormData对象是否包含某个键。

FormData.keys()
返回iterator允许遍历此对象中包含的键/值对的所有键。

FormData.set(name, value, filename)
为FormData对象内的现有键设置新值，或者添加键/值（如果尚不存在）。

FormData.values()
返回iterator允许遍历此对象中包含的所有值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AngularJS</title>
</head>
<body>

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

</body>
<script>
    // ArrayBuffer
    //

    // 方法一input
    var files = document.getElementById("files");
    files.addEventListener("change", function (ev) {
        var fs = ev.target.files; // 获取input中载入的文件FileList|var fs = files.files;
        var file = fs[0];   // 获取第一个文件File

        console.log('fileType:', file.type);

        var fileReader = new FileReader();
        fileReader.readAsArrayBuffer(file);

        fileReader.onload = function(e){
            console.log("e:", e);// e == ProgressEvent

            console.log("data:", fileReader.result);

            // 下载导入的文件
            var a = document.createElement('a');
            a.download = 'tet.txt';
            a.href = fileReader.result;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        };
    });


    // 方法二拖动到指定元素，这里设置为document
    function handleFileSelect(evt) {
        evt.stopPropagation();
        evt.preventDefault();

        var files = evt.dataTransfer.files;
        console.log("fs:", files[0]);
    }

    function handleDragOver(evt) {
        evt.stopPropagation();
        evt.preventDefault();
        evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
    }

    // Setup the dnd listeners.
    document.addEventListener('dragover', handleDragOver, false);
    document.addEventListener('drop', handleFileSelect, false);


</script>

</html>