利用HTML5技术实现表单文件数据的操作和上传
利用HTML5技术实现表单文件数据的操作和上传
提问于 2011-05-31 05:45:53
我打算使用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。目前这在任何浏览器上都是可能的吗？
谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2011-06-10 03:25:15
您当前的方法有几个地方是错误的：
您不需要FileWriter应用程序接口。没有HTML5 Filesystem API就不能使用。您需要的是来自File API: Writer spec的BlobBuilder应用程序接口。
其次，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()，但这将是您正在处理的文件的内容类型。试试看。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6181001
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号