這個示例并沒做優(yōu)化痒留，僅作為《Javascript高級程序設(shè)計》的部分摘錄
完整讀取
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>
部分讀取
部分讀取只需要調(diào)用input.files[0].slice(begin, end)截取一部分內(nèi)容即可纯蛾，范圍是[begin,end), 如:
reader.readAsDataURL(files[0].slice(begin, end))
為什么可以這樣寫呢言沐？
下面是讀取方法的函數(shù)簽名:
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的子類，F(xiàn)ile的slice方法就是Blob類上的slice方法，返回值也是Blob類型對象
只讀取文件的一部分可以節(jié)省時間，非常適合只關(guān)注數(shù)據(jù)中某個特定部分（如文件頭部）的情況蛉拙。
