使用 ajax 通过 HTML 中的 FormData 通过多部分表单发送数据和文件

Question

在下面的代码中，我能够传输数据，但是当我使用函数追加来传输文件和数据时，它不起作用。有人可以告诉我如何从上传中传输文件吗？期待一些帮助

$(document).ready(function() {

  var loader = '<img src="../assets/media/loader.gif" />';

  $('#submit').click(function() {

    confirm("Do you really want to send messages?");

    $('.loading').html(loader).fadeIn();

    var msg_area_cst = $('textarea[name=msg_area_cst]').val();

    var num_cst = $('textarea[name=num_cst]').val();

    var form_data = new FormData();

    form_data = 'msg_area_cst=' + msg_area_cst + '&num_cst=' + num_cst;

    form_data.append('upload', $('input[name=upload]'));

    $.ajax({

      url: "../server/CustomMsg.php",

      type: "POST",

      data: form_data,

      success: function(html) {

        if (html == 1) {

          $('#register_form').fadeOut('slow');

          $('.loading').fadeOut();

          $('.message').html('Successfully Sent ! ').fadeIn('slow');

        } else 

          alert('Sorry, unexpected error. Please try again later.');

      }

    });

  });

});

Answer 1

问题是因为您正确声明了一个FormData对象，但随后在下一行中立即用字符串覆盖它。您需要将append() 所有数据添加到 FormData 对象中。此外，您需要向append()方法提供文件数据，而不是引用控件的 jQuery 对象input type="file"。var form_data = new FormData();form_data.append('msg_area_cst', msg_area_cst);form_data.append('num_cst', num_cst);form_data.append('upload', $('input[name=upload]')[0].files[0]);话虽这么说，如果您从中读取值的控件包含在元素中，则可以使事情变得更加简单form。然后您可以使用submit该表单的事件并将对其的引用传递给 FormData 构造函数。confirm()另外，您也不会对单击“我假设您想停止表单提交”的结果执行任何操作Cancel，上面的示例现在使用preventDefault().最后，使用起来html == 1很不可靠。首先html是一个字符串，因此依赖于整数的隐式类型强制并不理想。此外，如果包含任何空格，返回纯文本响应可能会导致问题。我强烈建议您更改服务器端逻辑以返回序列化格式（例如 JSON），并使用布尔值作为“成功”标志。话虽如此，试试这个：$('#yourForm').on('submit', function(e) {&nbsp; if (!confirm("Do you really want to send messages?")) {&nbsp; &nbsp; e.preventDefault();&nbsp; }&nbsp;&nbsp;&nbsp; $('.loading').html(loader).fadeIn();&nbsp; $.ajax({&nbsp; &nbsp; url: "../server/CustomMsg.php",&nbsp; &nbsp; type: "POST",&nbsp; &nbsp; data: new FormData(this),&nbsp; &nbsp; success: function(html) {&nbsp; &nbsp; &nbsp; if (html.trim() === "1") {&nbsp; &nbsp; &nbsp; &nbsp; $('#register_form').fadeOut('slow');&nbsp; &nbsp; &nbsp; &nbsp; $('.loading').fadeOut();&nbsp; &nbsp; &nbsp; &nbsp; $('.message').html('Successfully Sent ! ').fadeIn('slow');&nbsp; &nbsp; &nbsp; } else&nbsp; &nbsp; &nbsp; &nbsp; alert('Sorry, unexpected error. Please try again later.');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; });});

Answer 2

试试这个ajax代码&nbsp; $.ajax({&nbsp; &nbsp; &nbsp;url: "../server/CustomMsg.php",&nbsp; &nbsp; &nbsp;type: "POST",&nbsp; &nbsp; data: form_data,&nbsp; &nbsp; contentType: false,&nbsp; &nbsp; &nbsp; &nbsp; cache: false,&nbsp; &nbsp; &nbsp; &nbsp; processData:false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;async: true,&nbsp; success: function(html) {&nbsp; &nbsp; if (html == 1) {&nbsp; &nbsp; &nbsp; $('#register_form').fadeOut('slow');&nbsp; &nbsp; &nbsp; $('.loading').fadeOut();&nbsp; &nbsp; &nbsp; $('.message').html('Successfully Sent ! ').fadeIn('slow');&nbsp; &nbsp; } else&nbsp;&nbsp; &nbsp; &nbsp; alert('Sorry, unexpected error. Please try again later.');&nbsp; }});