Question

我可以使用以下格式成功将图像上传到服务器：

<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代码。

任何人都可以看到为什么JS代码产生500伺服器错误，但html表单版本工作正常吗？

Answer 1

比较两个工作流程的请求正文。 Firefox中的实时HTTP标头非常有用。

在JS中上传FormData图像

1 个答案: