如何使用AJAX和jQuery传递文件数据？

我正在尝试创建一个允许用户填写数据的表单，如果选中了一个选项，则会打开div，用户可以选择上传文件及其提交。

我遇到的问题是通过ajax正确传递文件。 我无法正确地将它整合在一起以获得我正在寻找的结果，这是发布到我的PHP脚本的文件。 这是我传递数据的代码：

$(document).ready(function() { $("#submit_btn").click(function() { var proceed = true; //simple validation at client's end //loop through each field and we simply change border color to red for invalid fields $("#contact_form input[required=true], #contact_form textarea[required=true]").each(function(){ $(this).css('border-color',''); if(!$.trim($(this).val())){ //if this field is empty $(this).css('border-color','red'); //change border color to red proceed = false; //set do not proceed flag } //check invalid email var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))){ $(this).css('border-color','red'); //change border color to red proceed = false; //set do not proceed flag } }); if(proceed) //everything looks good! proceed... { //get input field values data to be sent to server var search_array = $('input[name="donation"]').map(function(){ return $(this).val(); }).get(); post_data = { 'user_name' : $('input[name=full_name]').val(), 'user_email' : $('input[name=email]').val(), 'address' : $('input[name=address]').val(), 'address2' : $('input[name=address2]').val(), 'city' : $('input[name=city]').val(), 'state' : $('input[name=state]').val(), 'zip' : $('input[name=zip]').val(), 'ccnum' : $('input[name=ccnum]').val(), 'expmonth' : $('select[name=expmonth]').val(), 'expyear' : $('select[name=expyear]').val(), 'cardname' : $('input[name=cardname]').val(), 'ccvcode' : $('input[name=ccvcode]').val(), 'donation' : $('input[name=donation]:checked').val(), 'donation_other' : $('input[name=donation_other]').val(), 'contact_phone' : $('input[name=contact_phone]').val(), 'attached_file' : $('input[name=attached_file]').val(), 'donatecomments' : $('textarea[name=donatecomments]').val() }; //Ajax post data to server $.post('https://www.xxxxxx.org/catch.php', post_data, function(response){ if(response.type == 'error'){ //load json data from server and output message output = '
'+response.text+'
'; }else{ output = '
'+response.text+'
'; //reset values in all input fields $("#contact_form input[required=true], #contact_form textarea[required=true]").val(''); $("#contact_form #contact_body").slideUp(); //hide form after success window.top.location.href = "https://www.xxxxxxxxx.org/thank-you"; } $("#contact_form #contact_results").hide().html(output).slideDown(); }, 'json'); } }); //reset previously set border colors and hide all message on .keyup() $("#contact_form input[required=true], #contact_form textarea[required=true]").keyup(function() { $(this).css('border-color',''); $("#result").slideUp(); }); }); 

我的文件选择行：

如何才能获得实际的文件数据？

Answer 1

您需要将文件存储为FormData。 您仍然可以通过将表单数据附加到FormData对象来发送表单数据以及文件附件。请参阅下面的示例：

注意 ：此示例假设它是一个xml文件。 如果它不是xml文件，请不要使用xml部分（if语句中的最后3行）。

JavaScript的

 // #fileUpload is to a input element of the type file var file = $('#fileUpload')[0].files[0] var fd = new FormData(); fd.append('theFile', file); $.ajax({ url: '...', type: 'POST', processData: false, contentType: false, data: fd, success: function (data, status, jqxhr) { //success code }, error: function (jqxhr, status, msg) { //error code } }); 

C＃

 protected void Page_Load(object sender, EventArgs e) { try { foreach (string file in Request.Files) { var fileContent = Request.Files[file]; if (fileContent != null && fileContent.ContentLength > 0) { Stream stream = fileContent.InputStream; BinaryReader br = new BinaryReader(stream); byte[] binaryData = br.ReadBytes(fileContent.ContentLength); string xml = System.Text.Encoding.Default.GetString(binaryData); XmlDocument xmlDoc = new XmlDocument(); xmlDoc.LoadXml(xml); } } } catch (Exception ex) { } } 

Answer 2

你可以使用FormData来做到这一点。 试试这个

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

Answer 3

有两种方法可以做到这一点，一种是传递参数，如果你的表格中有较少的变量。

 $post('url',{param1:$("#name").val(),param2:$("#middle").val()},function(data){ //Action as per data returned from php code }); 

另一种方法是serialize（）方法。

 $post('url',{param1:$("form").serialize()},function(data){ //Action as per data returned from php code }); 

Answer 4

 var formData = new FormData($("#formid")[0]); $.ajax({ url:'url', type: 'POST', data: formData, processData: false, contentType: false, async: false, success:function(response){ if(response == '100'){ swal({ title: "Blog Added", text: "Blog Added Successfully", type: "success", confirmButtonText: "OK", showCancelButton: false, }, function(){ /*location.reload();*/ window.location.href = 'redirect link'; }); }else{ toastr.error(response); } } });