javascript - 通过 Ajax 上传文件是重复的

Question

我想通过 Ajax 和 FormData 对象上传文件。为什么我的文件重复？

var button = document.querySelector('#send');
document.querySelector('#send').addEventListener('click', sendForm, false);
function sendForm(e) {
  e.preventDefault();
  var formElement;
  var formData;
  var xhr;
  var JSONObject;
  formElement = document.querySelector('#form');
  formData = new FormData(formElement);
  var fileInput = document.querySelector('#file');
  var files = fileInput.files;
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    formData.append('file[]', file, file.name);
  }
  console.log(...formData);
  xhr = new XMLHttpRequest();
  /**/
}

<form id="form">
	<label for="firstname">Prénom
		<input type="text" name="firstname" id="firstname" size="30" />
	</label>
	<label for="lastname">Nom
		<input type="text" name="lastname" id="lastname" size="30" />
	</label>
	<input type="file" name="file[]" id="file" multiple>
	<button id="send" type="submit">Submit</button>
</form>

我的代码有什么问题？我的循环不正确吗？

谢谢。

Answer 1

因为您手动将文件附加到 formData，它们已经存在。

注释掉不必要的代码后，您的代码就可以正常工作了。

var button = document.querySelector('#send');
document.querySelector('#send').addEventListener('click', sendForm, false);
function sendForm(e) {
  e.preventDefault();
  var formElement;
  var formData;
  var xhr;
  var JSONObject;
  formElement = document.querySelector('#form');
  formData = new FormData(formElement);
  var fileInput = document.querySelector('#file');
  /*
  The code that appends files in the formData, where thhey already here : 
  var files = fileInput.files;
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    formData.append('file[]', file, file.name);
  }*/
  console.log(...formData);
  xhr = new XMLHttpRequest();
  /**/
}

<form id="form">
	<label for="firstname">Prénom
		<input type="text" name="firstname" id="firstname" size="30" />
	</label>
	<label for="lastname">Nom
		<input type="text" name="lastname" id="lastname" size="30" />
	</label>
	<input type="file" name="file[]" id="file" multiple>
	<button id="send" type="submit">Submit</button>
</form>