收集多个输入文件以追加到FormData [英] collect multiple inputs file to append to FormData

问题描述

假设我有以下表格.

<form id="testForm">
  <input type="file" name="uploads[]"><br/>
  <input type="file" name="uploads[]"><br/>
  <input type="file" name="uploads[]"><br/>
  <input type="submit">
</form>

这是提交代码的一部分，该代码试图收集要追加到FormData的文件，但我不知道如何正确地完成操作.

And this is part of the submit code which tries to collect files to append to FormData, but I don't know how to do it properly.

var formData = new FormData();

var fileList = $("input[name='uploads[]']");
for(var x = 0; x < fileList.length; x++) {
  formData.append('file'+x, ???);
  console.log('appended a file');
}

var request = new XMLHttpRequest();
request.open('POST', '/upload');
request.send(formData);

request.onload = function(e) {
  console.log('Request Status', request.status);
};

这是服务器代码.

app.post('/upload', function(req, res) {
  var form = new formidable.IncomingForm();
  form.parse(req, function(err, fields, files) {
    console.log('handling form upload - fields', fields);
    console.log('handling form upload - files', files);
  });
  res.send('Thank you');
});

如果可以，我希望看到/tmp中保存的输出和文件.

If it works, I expect to see output and files saved in /tmp.

推荐答案

您不必收集字段，因为您可以将表单本身放入FormData对象:

You don't have to collect fields since you can put the form itself into FormData object:

var form = document.getElementById('testForm');

form.addEventListener('submit', function(e) {

  e.preventDefault();

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

  request.onload = function(e) {
    console.log('Request Status', request.status);
  };

  var formData = new FormData(form);
  request.send(formData);
});

更新

如果需要上传多个文件，则可以在输入中使用multiple属性，而不是多个输入:

If you need to upload several files, you might use multiple attribute on the input instead of several inputs:

<form id="testForm">
  <input type="file" name="upload" multiple>
  <input type="submit">
</form>

这篇关于收集多个输入文件以追加到FormData的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！