javascript - HTML5 File API readAsBinaryString reads files as much larger, different than files on disk - Stack Overflow

admin管理员组

文章数量:1201410

Full code at .

I am using HTML File API and drag/drop to upload files via XHR post to a PHP script. Procedurally, everything seems to be working OK, however when I try to open the uploaded files, any non-text file is much larger than the source file, and won't open. It's clearly not the same data as was on the source disk. However, text files are exactly the same and open just fine.

Some examples on a 3-file drag/drop upload: file 1: text/XML: on disk 13 KB, uploaded 13 KB, works perfectly file 2: image/PNG: on disk 14 KB, uploaded 18 KB, won't open file 3: application/XLSX: on disk 12 KB, uploaded 14 KB, won't open

It all boils down to this (after xhr headers are setup, file object is ready, etc):

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

returning large, bad data. Is there anything clearly wrong with it?

Full code at https://gist.github.com/992562.

I am using HTML File API and drag/drop to upload files via XHR post to a PHP script. Procedurally, everything seems to be working OK, however when I try to open the uploaded files, any non-text file is much larger than the source file, and won't open. It's clearly not the same data as was on the source disk. However, text files are exactly the same and open just fine.

Some examples on a 3-file drag/drop upload: file 1: text/XML: on disk 13 KB, uploaded 13 KB, works perfectly file 2: image/PNG: on disk 14 KB, uploaded 18 KB, won't open file 3: application/XLSX: on disk 12 KB, uploaded 14 KB, won't open

It all boils down to this (after xhr headers are setup, file object is ready, etc):

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

returning large, bad data. Is there anything clearly wrong with it?

• javascript
• html
• google-chrome
• file-upload

Share Improve this question Follow asked May 26, 2011 at 4:47 obrienmdobrienmd 2,82533 gold badges1818 silver badges88 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 25

This is probably because you're reading the file as a binary string and constructing the multipart/form-data request manually. For one, you don't need to use FileReader. Since you just want to send the content, try using xhr.send(File) or xhr.send(FormData). The latter constructs and sends a multipart/form-data for you:

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);
};

本文标签：