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()方法，而不是引用input type="file"控件的jQuery对象。

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），并为'success'标志使用布尔值。

话虽如此，请尝试以下操作：

$('#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代码

-s

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

2 个答案: