这个示例并没做优化，仅作为《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 = `<img src="${reader.result}">`;
break;
case 'text':
html = reader.result;
break;
}
output.innerHTML = html;
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input id="file" type="file" name="" value="" multiple>
<button type="submit"></button>
<div id="output">
</div>
<div id="progress"></div>
<script src="app.js"></script>
</body>
</html>
部分读取
部分读取只需要调用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类型对象
只读取文件的一部分可以节省时间，非常适合只关注数据中某个特定部分（如文件头部）的情况。
