使用Ajax以一种forms上传数据和文件?

我使用jQuery和Ajax来提交数据和文件,但是我不知道如何同时发送数据和文件。

我目前对这两种方法几乎一样,但数据收集到一个数组的方式是不同的,数据使用.serialize(); 但文件使用= new FormData($(this)[0]);

是否有可能将两种方法结合起来,以便能够通过Ajax将文件和数据以一种forms上传?

数据jQuery,Ajax和HTML

 $("form#data").submit(function(){ var formData = $(this).serialize(); $.ajax({ url: window.location.pathname, type: 'POST', data: formData, async: false, success: function (data) { alert(data) }, cache: false, contentType: false, processData: false }); return false; }); <form id="data" method="post"> <input type="text" name="first" value="Bob" /> <input type="text" name="middle" value="James" /> <input type="text" name="last" value="Smith" /> <button>Submit</button> </form> 

文件jQuery,Ajax和HTML

 $("form#files").submit(function(){ var formData = new FormData($(this)[0]); $.ajax({ url: window.location.pathname, type: 'POST', data: formData, async: false, success: function (data) { alert(data) }, cache: false, contentType: false, processData: false }); return false; }); <form id="files" method="post" enctype="multipart/form-data"> <input name="image" type="file" /> <button>Submit</button> </form> 

我怎样才能将上述内容结合起来,以便我可以通过Ajax将数据和文件以一种forms发送?

我的目标是能够用Ajax将所有这个表单发送到一个文章中,这有可能吗?

 <form id="datafiles" method="post" enctype="multipart/form-data"> <input type="text" name="first" value="Bob" /> <input type="text" name="middle" value="James" /> <input type="text" name="last" value="Smith" /> <input name="image" type="file" /> <button>Submit</button> </form> 

我遇到的问题是使用了错误的jQuery标识符。

可以 使用ajax 上传一个表单的数据和文件

PHP + HTML

 <? print_r($_POST); print_r($_FILES); ?> <form id="data" method="post" enctype="multipart/form-data"> <input type="text" name="first" value="Bob" /> <input type="text" name="middle" value="James" /> <input type="text" name="last" value="Smith" /> <input name="image" type="file" /> <button>Submit</button> </form> 

jQuery + Ajax

 $("form#data").submit(function(){ var formData = new FormData(this); $.ajax({ url: window.location.pathname, type: 'POST', data: formData, async: false, success: function (data) { alert(data) }, cache: false, contentType: false, processData: false }); return false; }); 

短版

 $("form#data").submit(function() { var formData = new FormData(this); $.post($(this).attr("action"), formData, function(data) { alert(data); }); return false; }); 

另一个select是使用一个iframe并将表单的目标设置为它。

你可以试试这个(它使用jQuery):

 function ajax_form($form, on_complete) { var iframe; if (!$form.attr('target')) { //create a unique iframe for the form iframe = $("<iframe></iframe>").attr('name', 'ajax_form_' + Math.floor(Math.random() * 999999)).hide().appendTo($('body')); $form.attr('target', iframe.attr('name')); } if (on_complete) { iframe = iframe || $('iframe[name=" ' + $form.attr('target') + ' "]'); iframe.load(function () { //get the server response var response = iframe.contents().find('body').text(); on_complete(response); }); } } 

它适用于所有浏览器,您不需要序列化或准备数据。 一个缺点是你无法监控进度。

另外,至less对于Chrome而言,请求不会出现在开发人员工具的“xhr”选项卡中,而是出现在“doc”

或更短:

 $("form#data").submit(function() { var formData = new FormData($(this)[0]); $.post($(this).attr("action"), formData, function() { // success }); return false; });