我正在尝试创建一个允许用户填写数据的表单,如果选中了一个选项,则会打开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 = '<div class="error">'+response.text+'</div>';
}else{
output = '<div class="success">'+response.text+'</div>';
//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();
});
});
我的文件选择行:
<input id="attached_file" name="attached_file" style="width:220px;" placeholder="Enter an amount - No $sign" type="file" value="" onfocus="jQuery(this).prev("input").attr("checked", true); if(jQuery(this).val() == "Other") { jQuery(this).val(""); }" onblur="if(jQuery(this).val().replace(" ", "") == "") { jQuery(this).val("Other"); }" tabindex="18">
如何才能获得实际的文件数据?
解决方法:
您需要将文件存储为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)
{
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。