XMLHTTPREQUEST发送文件和参数
XMLHTTPREQUEST发送文件和参数
我正在使用jQuery和Ajax提交表单数据和文件,但我不确定如何在一个表单中同时发送数据和文件。
目前我使用的两种方法基本相同,但是收集数组中的数据的方法不同,数据使用.serialize();
,但是文件使用= new FormData($(this)[0]);
是否可能将两种方法组合在一起,通过Ajax上传文件和数据在一个表单中?
数据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; });
文件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; });
我如何将上述内容组合在一起,以便通过Ajax在一个表单中发送数据和文件?
我的目标是能够通过Ajax在一次提交中发送所有表单数据和文件,这是否可能?
admin 更改状态以发布 2023年5月22日
另一个选项是使用iframe并将表单的目标设置为它。
你可以尝试这个方法(它使用jQuery):
function ajax_form($form, on_complete) { var iframe; if (!$form.attr('target')) { //create a unique iframe for the form 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); }); } }
它在所有浏览器上都能很好地工作,您不需要序列化或准备数据。
一个缺点是你无法监视进度。
而且,至少对于Chrome来说,该请求不会出现在“开发者工具”的“xhr”选项卡下,而是“文档”下面。
我遇到的问题是使用了错误的jQuery标识符。
您可以使用ajax使用一个表单上传数据和文件。
PHP + HTML
jQuery + Ajax
$("form#data").submit(function(e) { e.preventDefault(); var formData = new FormData(this); $.ajax({ url: window.location.pathname, type: 'POST', data: formData, success: function (data) { alert(data) }, cache: false, contentType: false, processData: false }); });
简短版本
$("form#data").submit(function(e) { e.preventDefault(); var formData = new FormData(this); $.post($(this).attr("action"), formData, function(data) { alert(data); }); });