使用FormData上传PHP AJAX图像

我对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文件发送一个请求，但是没有数据发送，基本上我的表单就是这样：

似乎没有任何数据在头文件中传递，我想我会通过PHP使用$_POST['data']数组或$_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'] [...] 

但要小心， 在IE10之前使用FormData不能在IE上运行

Answer 2

您需要在ajax调用中设置processData和contentType （还要在input元素中添加id以获取文件内容）。

HTML

JS

  $(function() { $('.input_photo').on("change",function() { var file = document.getElementById("photo").files[0]; //fetch file var formData = new FormData(); formData.append('file', file); //append file to formData object $.ajax({ url: "upload.php", type: "POST", data: formData, processData: false, //prevent jQuery from converting your FormData into a string contentType: false, //jQuery does not add a Content-Type header for you success: function (msg) { alert(msg) } }); }); }); 

Answer 3

试试这个：

 var formData = $('form.upload-form').serialize();