ajax传文件和数据,如何通过AJAX和jQuery传递文件数据？

我想创建一个表单，允许用户填写数据，如果选项被选中，div打开并且用户可以选择上传文件以及他们的提交。如何通过AJAX和jQuery传递文件数据？

我遇到的问题是如何将文件直通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-\.][email protected]([\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();

});

});

而且我的文件选择行：

我怎样才能得到实际的文件数据传递呢？

2016-06-15

MrTechie

+0

你需要把它作为FORMDATA。我会做一个例子。 –

+0

@mwilson - 谢谢！我无法完全弄清楚。其他示例采用与此不同的路线。 –