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

  if (!confirm("Do you really want to send messages?")) {

    e.preventDefault();

  }

  

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

  $.ajax({

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

    type: "POST",

    data: new FormData(this),

    success: function(html) {

      if (html.trim() === "1") {

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

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

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

      } else

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

      }

    }

  });

});

Answer 2

试试这个ajax代码

  $.ajax({

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

     type: "POST",

    data: form_data,

    contentType: false,

        cache: false,

        processData:false,

         async: true,

  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.');

  }

});