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

Question

我正在尝试创建一个允许用户填写数据的表单，如果选中一个选项，则会打开一个 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(&quot;input&quot;).attr(&quot;checked&quot;, true); if(jQuery(this).val() == &quot;Other&quot;) { jQuery(this).val(&quot;&quot;); }" onblur="if(jQuery(this).val().replace(&quot; &quot;, &quot;&quot;) == &quot;&quot;) { jQuery(this).val(&quot;Other&quot;); }" tabindex="18">

我怎样才能让实际的文件数据也通过？

原文由 MrTechie 发布，翻译遵循 CC BY-SA 4.0 许可协议

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)
    {

    }
}

原文由 mwilson 发布，翻译遵循 CC BY-SA 3.0 许可协议