0

我打算使用 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，然后表单可以提交。目前在任何浏览器上都可以吗？

谢谢你。

4

1 回答 1

4

您当前的方法有几个问题：

您不需要FileWriterAPI。没有HTML5 Filesystem API就无法使用。您需要的是BlobBuilder来自File API: Writer spec的 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()，但这将是您正在使用的文件的内容类型。尝试一下。

于 2011-06-09T19:25:14.893 回答