尝试使用 AJAX 上传文件时 FormData 对象始终为空

Question

当尝试使用 AJAX 上传图像而不直接提交表单并将 FormData 对象发送到服务器时，它会返回空$_FILES数组。<input type="submit">但是，如果我使用标记数组提交表单$_FILES不为空并接收数据。

超文本标记语言

<form action="core/update.php" method="post" enctype="multipart/form-data" id="profile-photo" name="profile-photo-form">
  <input type="file" id="photo-filename" name="avatar" class="edit-show panel photo-upload">
</form>
<button class="save-button" disabled="disabled">Save</button>

JS

$('#profile-photo').on('submit', function(e) {
    e.preventDefault();

    var form = $('#profile-photo')[0];
    var formData = new FormData(form);

    formData.append('avatar', $('#photo-filename')[0].files[0]);

    $.ajax({
      url: "core/update.php", 
      data: formData,
      type: "POST", 
      contentType: false,       
      cache: false,             
      processData: false
    });

    console.log(formData);
});

$('.save-button').on('click', function() {
    if ($('#photo-filename').val != '') {
        $('#profile-photo').submit();
    };
}

UPD

还$('#profile-photo').serialize()返回空白字符串。

更新2

它会与页面上的其他 AJAX 请求冲突吗？

Answer 1

尝试这个：

因为用户可能上传多个文件

jQuery.each(jQuery('#photo-filename')[0].files, function(i, file) {
    data.append('file-'+i, file);
});

代替

formData.append('avatar', $('#photo-filename')[0].files[0]);

完整的解决方案：

$('#profile-photo').on('submit', function(e) {
    e.preventDefault();

var form = $('#profile-photo')[0];
var formData = new FormData(form);

 jQuery.each(jQuery('#photo-filename')[0].files, function(i, file) {
    formData.append('file-'+i, file);
});

$.ajax({
  url: "core/update.php", 
  data: formData,
  type: "POST", 
  contentType: false,       
  cache: false,             
  processData: false
});

    console.log(formData);
});