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なしでは使用できません。必要なのはBlobBuilderFile API: Writer specの API です。

第二に、FileReader読み取りメソッドは非同期であるため、実行しているように結果を渡すことはできませんdoSomething()。また、ファイルごとに個別のリーダー オブジェクトを作成する必要があります。

ファイルを として読み取り、ArrayBufferJS 型付き配列 ( 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 に答える