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