目前这个主题的信息确实很少,因此我组合了一个示例,其中包括:
- 在
<input type="file">
上使用webkitdirectory
属性。
- 使用文件系统API。
- 这涉及沙盒文件系统,它允许您在客户端机器上存储文件。
- 使用文件API。
- 这是允许您读取文件的API。 通过
<input type="file">
元素、拖放传输或通过文件系统API可以访问这些文件。
由于这些目前只在Chrome中正常工作,因此我在必要时使用webkit
前缀。
http://jsfiddle.net/zLna6/3/
代码本身有注释,希望能够清楚明白。
var fs,
err = function(e) {
throw e;
};
webkitRequestFileSystem(
window.TEMPORARY,
5 * 1024 * 1024,
function(_fs) {
fs = _fs;
},
err
);
$(":file").on("change", function() {
$("ul").empty();
var files = this.files;
if(!files) return;
function save(i) {
var file = files[i];
var text = file ? file.name : "Done!";
$("<li>").text(text).appendTo("ul");
if(!file) return;
fs.root.getFile(
file.name,
{ create: true },
function(fileEntry) {
fileEntry.createWriter(function(writer) {
writer.onwriteend = function() {
save(i + 1);
};
writer.onerror = err;
var fr = new FileReader;
fr.onloadend = function() {
var builder = new WebKitBlobBuilder;
builder.append(fr.result);
writer.write(builder.getBlob());
};
fr.onerror = err;
fr.readAsArrayBuffer(file);
}, err);
},
err
);
}
save(0);
});
$("ul").on("click", "li:not(:last)", function() {
fs.root.getFile($(this).text(), {}, function(fileEntry) {
fileEntry.file(function(file) {
var fr = new FileReader;
fr.onloadend = function() {
console.log(fr.result.slice(0, 100));
};
fr.readAsBinaryString(file);
});
}, err);
});