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

Question

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

HTML

<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() 返回空白字符串。

UPD 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);
});

Answer 2

试试下面的，

$('#profile-photo').on('submit', function(e) {
    e.preventDefault();
    var formData = new FormData(this); // here I am editing

    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);
});

Answer 3

如果只是您要发送的文件，那么您可以按照以下方式进行操作，无需在此处将表格附加到formdata：

$('#profile-photo').on('submit', function(e) {
    e.preventDefault();
    var formdata = new FormData();
    var fileInput = $('#photo-filename');


    //Use Either this
    $.each($(fileInput).get(0).files, function (index, value) {
           formdata.append('avatar', value);
    });

    //Or this
    $.each($(fileInput).get(0).files, function (index, value) {
        formdata.append(value.name, value);
    });

    //For single file use this
    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);
});