在很长的一段时间内 JavaScript 是不能操作二进制数据的。同样的为了安全性，直接操作文件也是不被支持的。但是随着 ECMAScript 5 的出现，引入了 Blob 对象，允许直接操作二进制数据。
当然在?ECMAScript 5 之前也可以操作二进制数据，但是速度慢还容易出错。charCodeAt()方法，支持一个个字节地从文字编码转成二进制数据，还有一种办法是将二进制数据转成 Base64 编码，再进行处理。今天我们要介绍的是使用 Blob 对象，直接操作二进制数据。
Blob 对象是一个代表二进制数据的基本对象，在它的基础上，又衍生出一系列相关的 API，用来操作文件。
File 对象：负责处理那些以文件形式存在的二进制数据，也就是操作本地文件；
FileList 对象：File 对象的网页表单接口；
FileReader 对象：负责将二进制数据读入内存内容；
URL 对象：用于对二进制数据生成 URL。
Blob 对象
Blob(Binary Large Object)对象代表了一段二进制数据，提供了一系列操作接口。其他操作二进制数据的 API(比如 File 对象)，都是建立在 Blob 对象基础上的，继承了它的属性和方法。
生成 Blob 对象有两种方法：
一种是使用 Blob 构造函数
另一种是对现有的 Blob 对象使用 slice 方法切出一部分。
Blob 构造函数，接受两个参数。第一个参数是一个包含实际数据的数组，第二个参数是数据的类型，这两个参数都不是必需的。
var htmlParts = ["hey!"];
var myBlob = new Blob(htmlParts, { "type" : "text//xml" });
下面是一个利用 Blob 对象，生成可下载文件的例子。
var blob = new Blob(["Hello World"]);
var a = ("a");
= (blob);
= "";
= "Download Hello World!";
(a);
上面的代码生成了一个超级链接，点击后提示下载文本文件 ，文件内容为“Hello World”。
Blob 对象的 slice 方法，将二进制数据按照字节分块，返回一个新的 Blob 对象。
var newBlob = (startingByte, endindByte);
下面是一个使用 XMLHttpRequest 对象，将大文件分割上传的例子。
function upload(blobOrFile) {
var xhr = new XMLHttpRequest();
('POST', '/server', true);
= function(e) { ... };
(blobOrFile); }
('input[type="file"]').addEventListener('change',
function(e) {
var blob = [0];
const BYTES_PER_CHUNK = 1024 * 1024;
// 1MB chunk sizes.
const SIZE = ;
var start = 0;
var end = BYTES_PER_CHUNK;
while(start < SIZE) {
upload((start, end));
start = end;
end = start + BYTES_PER_CHUNK; } }, false)();
Blob 对象有两个只读属性：
size：二进制数据的大小，单位为字节。
type：二进制数据的 MIME 类型，全部为小写，如果类型未知，则该值为空字符串。
在 Ajax 操作中，如果 设为 blob，接收的就是二进制数据。
FileList 对象
FileList 对象针对表单的 file 控件。当用户通过 file 控件选取文件后，这个控件的 files 属性值就是 FileList 对象。它在结构上类似于数组，包含用户选取的多个文件。
multiple />
当用户选取文件后，就可以读取该文件。
var selected_file = ('input').files[0];
采用拖放方式，也可以得到 FileList 对象。
var dropZone = ('drop_zone');
('drop', handleFileSelect, false);
function handleFileSelect(evt) {
();
();
var files = ;
// FileList object. // ... }
上面代码的 handleFileSelect 是拖放事件的回调函数，它的参数 evt 是一个事件对象，该参数的 属性就是一个 FileList 对象，里面包含了拖放的文件。
File API
File API 提供 File 对象，它是 FileList 对象的成员，包含了文件的一些元信息，比如文件名、上次改动时间、文件大小和文件类型。
var selected_file = ('input').files[0];
var fileName = selected_file.name;
var fileSize = selected_file.size;
var fileType = selected_file.type;
File 对象的属性值如下：
name：文件名，该属性只读。
size：文件大小，单位为字节，该属性只读。
type：文件的 MIME 类型，如果分辨不出类型，则为空字符串，该属性只读。
lastModified：文件的上次修改时间，格式为时间戳。
lastModifiedDate：文件的上次修改时间，格式为 Date 对象实例。
$('#upload-file').files[0] // {
// lastModified: 1449370355682,
// lastModifiedDate: Sun Dec 06 2015 10:52:35 GMT+0800 (CST),
// name: "HTTP 2 is here Goodbye SPDY Not quite ",
// size: 17044,
// type: "image/png" // }
FileReader API
FileReader API 用于读取文件，即把文件内容读入内存。它的参数是 File 对象或 Blob 对象。
对于不同类型的文件，FileReader 提供不同的方法读取文件。
readAsBinaryString(Blob|File)：返回二进制字符串，该字符串每个字节包含一个 0 到 255 之间的整数。
readAsText(Blob|File, opt_encoding)：返回文本字符串。默认情况下，文本编码格式是’UTF-8’，可以通过可选的格式参数，指定其他编码格式的文本。
readAsDataURL(Blob|File)：返回一个基于 Base64 编码的 data-uri 对象。
readAsArrayBuffer(Blob|File)：返回一个 ArrayBuffer 对象。
readAsText 方法用于读取文本文件，它的第一个参数是 File 或 Blob 对象，第二个参数是前一个参数的编码方法，如果省略就默认为 UTF-8 编码。该方法是异步方法，一般监听 onload 件，用来确定文件是否加载结束，方法是判断 FileReader 实例的 result 属性是否有值。其他三种读取方法，用法与 readAsText 方法类似。
var reader = new FileReader();
= function(e) {
var text = ; }
(file, encoding);
readAsDataURL 方法返回一个 data URL，它的作用基本上是将文件数据进行 Base64 编码。你可以将返回值设为图像的 src 属性。
var file = ('destination').files[0];
if(('image') !== -1) {
var reader = new FileReader();
= function (e) {
var dataURL = ; }
(file); }
readAsBinaryString 方法可以读取任意类型的文件，而不仅仅是文本文件，返回文件的原始的二进制内容。这个方法与 方法结合使用，就可以使用 JavaScript 上传任意文件到服务器。
var reader = new FileReader();
= function(e) {
var rawData = ; }
(file);
readAsArrayBuffer 方法读取文件，返回一个类型化数组(ArrayBuffer)，即固定长度的二进制缓存数据。在文件操作时(比如将 JPEG 图像转为 PNG 图像)，这个方法非常方便。
var reader = new FileReader();
= function(e) {
var arrayBuffer = ; }
(file);
除了以上四种不同的读取文件方法，FileReader API 还有一个 abort 方法，用于中止文件上传。
var reader = new FileReader();
();
FileReader 对象采用异步方式读取文件，可以为一系列事件指定回调函数。
onabort 方法：读取中断或调用 ()方法时触发。
onerror 方法：读取出错时触发。
onload 方法：读取成功后触发。
onloadend 方法：读取完成后触发，不管是否成功。触发顺序排在 onload 或 onerror 后面。
onloadstart 方法：读取将要开始时触发。
onprogress 方法：读取过程中周期性触发。
下面的代码是如何展示文本文件的内容。
var reader = new FileReader();
= function(e) {
console.log(); }
(blob);
onload 事件的回调函数接受一个事件对象，该对象的 就是文件的内容。
下面是一个使用 readAsDataURL 方法，为 img 元素添加 src 属性的例子。
var reader = new FileReader();
= function(e) {
('img').src = ; };
(f);
下面是一个 onerror 事件回调函数的例子。
var reader = new FileReader();
= errorHandler;
function errorHandler(evt) {
switch() {
case .NOT_FOUND_ERR:alert('File Not Found!');
break;
case .NOT_READABLE_ERR:alert('File is not readable');
break;
case .ABORT_ERR: break;
default: alert('An error occurred reading this file.'); }; }
下面是一个 onprogress 事件回调函数的例子，主要用来显示读取进度。
var reader = new FileReader();
= updateProgress;
function updateProgress(evt) {
if () {
var percentLoaded = (( / Bidelman) * 100);
var progress = ('.percent');
if (percentLoaded < 100) {
= percentLoaded + '%';
= percentLoaded + '%';} } }
读取大文件的时候，可以利用 Blob 对象的 slice 方法，将大文件分成小段，逐一读取，这样可以加快处理速度。
【注：本文源自网络文章资源，由站长整理发布】
web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：详解 JavaScript 操作文件和二进制数据