使用AJAX上传文件时，FormData对象总是为空

When trying to upload an image using AJAX without submitting the form directly and sending a FormData object to server it returns empty $_FILES array. But if I submit the form using <input type="submit"> tag $_FILES array is not empty and recieves the data.

当尝试使用AJAX上传图片而不直接提交表单并向服务器发送FormData对象时，它返回空的$_FILES数组。但是如果我使用标签$_FILES数组不为空并接收数据。

HTML

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>

$('#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

乌利希期刊指南

Also $('#profile-photo').serialize() returns blank string.

serialize()返回空字符串。

UPD 2

乌利希期刊指南2

Can it conflict with the other AJAX-requests on the page?

它会与页面上的其他ajax请求发生冲突吗?

3 个解决方案

#1

Try this:

试试这个:

Because user may upload multiple files

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

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

Instead of

而不是

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

Complete Solution:

完整的解决方案:

$('#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);
});

#2

Try the following,

尝试以下,

$('#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);
});

#3

If it is only the file you want to send then you can do it as below and no need to attach form here to formdata:

如果只是你想发送的文件，你可以按照下面的方式发送，不需要在这里将表单附加到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);
});

#1