Блог

Полный код на https://gist.github.com/992562 .

Я использую HTML File API и перетаскиваю файлы через XHR post в PHP-скрипт. Процедурно, кажется, все работает нормально, однако, когда я пытаюсь открыть загруженные файлы, любой нетекстовый файл намного больше исходного файла и не открывается. Это явно не те данные, которые были на исходном диске. Однако текстовые файлы точно такие же и открываются просто отлично.

Некоторые примеры при загрузке перетаскиванием из 3 файлов: файл 1: текст / XML: на диске 13 КБ, загружено 13 КБ, работает отлично файл 2: изображение / PNG: на диске 14 КБ, загружено 18 КБ, не открывается файл 3: приложение / XLSX: на диске 12 КБ, загружено 14 КБ, не открывается

Все это сводится к следующему (после настройки заголовков xhr, файловый объект готов и т.д.):

   var reader = new FileReader();
  reader.onload = function(evt) {
    xhr.send(evt.target.result)
  }
  reader.readAsBinaryString(f);
  

возвращает большие, неверные данные. Есть ли в этом что-то явно неправильное?

Вероятно, это потому, что вы читаете файл как двоичную строку и создаете multipart/form-data запрос вручную. Во-первых, вам не нужно использовать FileReader . Поскольку вы просто хотите отправить содержимое, попробуйте использовать xhr.send(File) или xhr.send(FormData) . Последний создает и отправляет multipart/form-data для вас:

 function uploadFiles(url, files) {
  var formData = new FormData();

  for (var i = 0, file; file = files[i];   i) {
    formData.append(file.name, file);
  }

  var xhr = new XMLHttpRequest();
  xhr.open('POST', url, true);
  xhr.onload = function(e) { ... };

  xhr.send(formData);  // multipart/form-data
}

document.querySelector('input[type="file"]').onchange = function(e) {
  uploadFiles('/server', this.files);
};