Управление и загрузка данных файла формы с использованием технологии HTML5

Question

Я пытаюсь использовать HTML5 FileReader и, возможно, API-интерфейс FileWriter для манипуляции, а затем загружать манипулированные данные из тега ввода типа файла.

Вот что у меня есть:

$(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, который затем может отправить форма.Это возможно в настоящее время в любом из браузеров?

Спасибо.

Answer 1

В вашем текущем подходе есть пара ошибок:

Вам не нужен FileWriter API. Это невозможно использовать без HTML5 API файловой системы . Что вам нужно, это BlobBuilder API из File API: Writer spec .

Во-вторых, 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(), но это быть типом содержимого файла, с которым вы работаете. Попробуй.