我打算使用 HTML5 FileReader 以及可能的 FileWriter API 来操作,然后从文件类型输入标记上传操作后的数据。
这是我到目前为止所拥有的:
$(function() {
$("#files").change(function(e) {
var files = e.target.files
, reader = new FileReader()
, i;
for(i=0; f = files[i]; ++i) {
f = doSomething(reader.readAsBinaryString(f)); // Manipulate the File
}
return true;
});
});
那么我该如何实现 doSomething 方法呢?我需要返回一个 FileObject,然后表单可以提交该 FileObject。目前这在任何浏览器上都可行吗?
谢谢。
最佳答案
您当前的方法存在一些问题:
您不需要 FileWriter
API。如果没有 HTML5 Filesystem API 则无法使用。您需要的是 File API: Writer spec 中的 BlobBuilder
API .
其次,FileReader
读取方法是异步的,因此无法传递结果
像你正在做的那样 doSomething()
。您还需要为每个文件创建一个单独的读取器对象。
您可以尝试的一件事是将文件作为 ArrayBuffer
读取,通过 JS 类型数组 (Uint8Array
) 操作其字节,从该缓冲区创建一个 Blob,然后将结果发送到服务器。像这样的东西可能会起作用(未经测试):
$(function() {
$("#files").change(function(e) {
var files = e.target.files;
[].forEach.call(files, function(f, i) {
var reader = new FileReader();
reader.onload = function(e) {
doSomething(this.result);
};
reader.readAsArrayBuffer(f);
});
return true;
});
});
var doSomething = function(arrayBuffer) {
// Create a unsigned 8-bit view from the underlying data buffer.
var ui8a = new Uint8Array(arrayBuffer);
for (var i = 0; i < ui8a.length; ++i) {
// Manipulate each byte. Its underlying arraybuffer will be changed.
// ui8a[i] = xxx // set byte at offset i to something.
}
var bb = new WebKitBlobBuilder(); // Build a blob from the arraybuffer data.
bb.append(ui8a.buffer);
upload(bb.getBlob('your/filemimetype'));
};
var upload = function(blob) {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/server', true);
xhr.onload = function(e) { ... };
xhr.send(blob);
};
我不确定您是否需要将 mimetype 传递给 bb.getBlob()
,但这会
是您正在使用的文件的内容类型。尝试一下。
关于javascript - 使用 HTML5 技术操作和上传表单文件数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6181001/