1. HTML5 开发
Web,MobileWeb & Apps
范圣刚
安博中程在线

2. File API
从 Web 访问文件

3. 介绍
安博中程在线
File API
FileReader API
Filesystem & FileWriter API
Blob constructing
Blob URLs
Example
扩展阅读
·
·
·
·
·
·
·
3/14

4. 使用File APIs读取文件
规范提供的从local filesystem 访问文件的几个接口:
安博中程在线
File: 一个单独的文件；提供了诸如文件名，文件大小，mimetype，以及一个到文
件句柄的引用。
FileList: File对象的一个类似数组的序列。(想象一下多文件上传或者直接从桌面系
统拽一个文件夹的情形)
Blob: 允许把文件转换成字节数值。
·
·
·
4/14

5. 检测浏览器对File API的支持情况
方法1: 检测File, FileReader, FileList, Blob属性是否存在
执行检测执行检测
安博中程在线
<script type='text/javascript'>
function supports_fileapi() {
// 检查各种File API的支持情况
if (window.File && window.FileReader && window.FileList && window.Blob) {
// 所有的File APIs都支持
} else {
alert('浏览器对File APIs没有全部支持！');
}
}
</script>
JAVASCRIPT
5/14

6. 使用Input表单元素选择文件
No file chosenChoose Files
安博中程在线
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
HTML
<script type='text/javascript'>
function handleFileSelect(evt) {
var files = evt.target.files;
var output = [];
for (var i=0, f; f = files[i]; i++) {
output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') -',
f.size, ' 字节, 最后修改: ', f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a', '</li>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
JAVASCRIPT
6/14

7. 使用拖拽方式选择文件
把文件拖拽到这里
安博中程在线
function handleFileSelect2(evt) {
evt.stopPropagation(); evt.preventDefault();
var files = evt.dataTransfer.files; var output = [];
for (var i=0, f; f = files[i]; i++) {
output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') -',
f.size, ' 字节, 最后修改: ', f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a', '</li>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
function handleDragOver(evt) {
evt.stopPropagation(); evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy';
}
var dropZone = document.getElementById('drop-zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect2, false);
JAVASCRIPT
7/14

8. FileReader
FileReader包含四种异步读取文件的方式：
一旦这些read方法被调用，onloadstart, onprogress, onload, onabort, onerror, onloadend就可以被用来
追踪进度。
安博中程在线
FileReader.readAsBinaryString(Blob|File) - result属性包含的是file/blob的二进制字符串形式的数据。每
个字节由一个0-255的整数表示。
FileReader.readAsText(Blob|File, opt_encoding) - result属性包含的是以文本方式表示的file/blob数据。
默认情况下，字符串以'UTF-8'编码方式解码。使用opt_encoding参数可以指定一个不同的格式。
FileReader.readAsDataURL(Blob|File) - result属性包含的是以data URL编码的file/blob数据。
FileReader.readAsArrayBuffer(Blob|File) - result属性包含的是以ArrayBuffer对象表示的file/blob数据。
·
·
·
·
8/14

9. readAsDataURL Example
No file chosenChoose Files
安博中程在线
function handleFileSelect3(evt) {
var files = evt.target.files;
for (var i=0, f; f = files[i]; i++) {
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
// Render thumnial
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('thumbnails').insertBefore(span, null);
};
})(f);
reader.readAsDataURL(f);
}
}
JAVASCRIPT
9/14

10. 文件切片
Slicing File
File接口提供了slice方法支持把文件切成不同的片段，第一个参数是起始的字节数，第二个参数是结束的字节
数，还有一个可选的内容类型字符串可以作为第三个参数：
安博中程在线
var blob = file.slice(startingByte, endingByte);
reader.readAsBinary(blob);
JAVASCRIPT
10/14

11. Slice Example
No file chosenChoose File 读取字节数: 1‑801‑80 100‑150100‑150 10‑2010‑20 整个文件整个文件
安博中程在线
function readBlob(opt_startByte, opt_stopByte) {
var file = document.getElementById('files4').files[0];
var start = parseInt(opt_startByte) || 0;
var stop = parseInt(opt_stopByte) || file.size - 1;
var reader = new FileReader();
reader.onloadend = function(evt) {
if (evt.target.readyState == FileReader.DONE) {
document.getElementById('byte_content').textContent = evt.target.result;
document.getElementById('byte_range').textContent =
['Read bytes: ', start + 1, ' - ', stop + 1,
' of ', file.size, ' byte file'].join('');
}
};
var blob = file.slice(start, stop + 1);
reader.readAsBinaryString(blob);
}
JAVASCRIPT
11/14

12. 监视文件读取进度
可以使用onloadstart和onprogress事件来监视读取进度
No file chosenChoose File 停止读取停止读取
安博中程在线
function handleFileSelect5(evt) {
reader = new FileReader();
reader.onerror = errorHandler;
reader.onprogress = updateProgress;
reader.onabort = function(e) {
alert('文件读取操作被取消');
};
reader.onloadstart = function(e) {
document.getElementById('progress_bar').className = 'loading';
};
reader.onload = function(e) {
progress.style.width = '100%';
progress.textContent = '100%';
setTimeout("document.getElementById('progress_bar').className='';", 2000);
}
reader.readAsBinaryString(evt.target.files[0]);
}
JAVASCRIPT
12/14

13. 参考
安博中程在线
W3C 规范 - File
W3C 规范 - FileSystem API
W3C 规范 - FileWriter
W3C 规范 - ProgressEvents
W3C 规范 - Drag and Drop
Mozilla Hacks: Interactive file uploads
MDC: Drag Operations
HTML5 Doctor: Native Drag and Drop
·
·
·
·
·
·
·
·
13/14

14. <Thank you!>
微博 @范圣刚
博客 www.tfan.org
github github.com/princetoad