0

次のフォームを使用して、サーバーに画像を正常にアップロードできます。

<form id="upload_form" action="/upload" enctype="multipart/form-data" method="post">
  <input name="image_url" type="file">
  <input id='submit' type="submit" value="Upload">
</form>

上記とまったく同じことをしようとしていますが、プログラムでHTML5 FormData（）オブジェクトを使用しています。

var bts_spritesheet;

handleSpritesheetSelection = function(evt) {
  var f, files, reader;
  files = evt.target.files;
  f = files[0];
  reader = new FileReader();
  reader.onload = (function(theFile) {
    function(e) {
      bts_spritesheet = e.target.result;
    };
  })(f);
  return reader.readAsDataURL(f);
};
document.getElementById('upload_spritesheet').addEventListener('change', handleSpritesheetSelection, false);


ユーザーが送信ボタンをクリックすると、次のように呼び出されます。

var formData = new FormData();
formData.append('bts_spriteSheet', bts_spritesheet);

var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);

xhr.onload = function(e) {
  return console.log('yay its done');
};
xhr.send(formData);

私のhtmlはただです：

 <input id="upload_spritesheet" type="file">

私が言ったように、上記の通常のhtml5フォームを使用してファイルをアップロードすることは問題なく機能するので、サーバー側で何をしているのかを含めたり話したりしていません。

JSコードが500サーボエラーを生成しているのに、htmlフォームバージョンが正常に機能している理由を誰かが理解できますか？

4

1 に答える 1

0

2 つのワークフローの要求本文を比較します。Firefox のライブ HTTP ヘッダーは便利です。

于 2013-06-07T18:05:41.030 に答える