使用FormData上传PHP AJAX图像

Question

我对jQuery和Ajax函数还比较陌生，但是过去几天一直在使用Ajax表单。我在尝试上传图像时遇到文件上传问题。在寻找资源时，我找不到任何有用的东西，因为它们似乎过于复杂，毫无意义，没有任何解释，这无助于我进一步学习。

我已经编写了以下代码来处理Ajax中的图片上传：

$(function() {
    $('.input_photo').on("change",function() {                              
        var formData = new FormData($('form.upload-form'));

        $.ajax({
            url: "upload.php",
            type: "POST",
            data: formData,
            success: function (msg) {
                alert(msg)
            }
        });
    });
});

这向upload.php文件发送了一个请求，但是没有发送数据，基本上我的表单实际上是这样的：

<form class="upload-form">
     <input type="file" name="input_photo" class="input_photo" />
</form>

似乎没有任何数据在标头中传递，我认为我将通过PHP使用$_POST['data']array或$_FILES？访问它。有更多知识的人请帮忙解释一下，进一步了解这一点将非常高兴。谢谢。

Answer 1

这将适用于一个或多个文件。

$('input:file').on('change', function () {

 var data = new FormData();

 //Append files infos
 jQuery.each($(this)[0].files, function(i, file) {
     data.append('file-'+i, file);
 });

 $.ajax({  
     url: "my_path",  
     type: "POST",  
     data: data,  
     cache: false,
     processData: false,  
     contentType: false, 
     context: this,
     success: function (msg) {
          alert(msg);
      }
  });
});

然后

$_FILES['file-0']
$_FILES['file-1']
[...]