html filereader 压缩,HTML5 FileReader示例

这个示例并没做优化，仅作为《Javascript高级程序设计》的部分摘录

完整读取

var fileInput = document.getElementById('file');

fileInput.addEventListener('change', function(event) {

var info = "",

output = document.getElementById('output'),

progress = document.getElementById('progress'),

files = event.target.files,

type = 'default',

reader = new FileReader();

if (/image/.test(files[0].type)) {

reader.readAsDataURL(files[0]);

type = 'image';

} else {

reader.readAsText(files[0]);

type = 'text';

}

reader.onerror = function() {

output.innerHTML = "Could not read file, error code is " +

reader.error.code;

};

reader.onprogress = function(event) {

if (event.lengthComputable) {

progress.innerHTML = event.loaded + "/" + event.total;

}

};

reader.onload = function() {

var html = "";

switch(type) {

case 'image':

html = ``;

break;

case 'text':

html = reader.result;

break;

}

output.innerHTML = html;

}

});

Document

部分读取

部分读取只需要调用input.files[0].slice(begin, end)截取一部分内容即可，范围是[begin,end), 如:

reader.readAsDataURL(files[0].slice(begin, end))

为什么可以这样写呢？

下面是读取方法的函数签名:

void abort();

void readAsArrayBuffer(in Blob blob);

void readAsBinaryString(in Blob blob);

void readAsDataURL(in Blob blob);

void readAsText(in Blob blob, [optional] in DOMString encoding);

这些方法都接受一个Blob类型的对象，实际上File是Blob的子类，File的slice方法就是Blob类上的slice方法，返回值也是Blob类型对象

只读取文件的一部分可以节省时间，非常适合只关注数据中某个特定部分(如文件头部)的情况。