Question

我正在尝试将文本文件上传到python脚本。如果我只上传表单数据并使用

form_contents = $(this).serialize() + "&async=true";

然后表单将保留在网页上并显示结果。如果我使用

var formData = new FormData($('form')[0]);

它提交表单和数据文件，但它不会保留在网页上。如何添加+ &async=true以使其保留在网页上。或者有不同的方法来做到这一点吗？

停留在网页上但不上传文件：

          $('#upload').submit(function () {
      form_contents = $(this).serialize() + "&async=true";
      form_action = $(this).attr('action');

      $.ajax({
      type: 'post',
          data: formData,
      url: form_action,
      success: function (result) {
      $('#upload').html(result);
      } 
      });
      return false;
  });

不会停留在网页上，而是上传文件：

$('#upload').submit(function () {
    var formData = new FormData($('form')[0]);
    form_action = $(this).attr('action');

    $.ajax({
    type: 'post',
    xhr: function() {
        myXhr = $.ajaxSettings.xhr();
        if(myXhr.upload){ 
        myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
    }
    return myXhr;
    },
    data: formData,
    url: form_action,
    success: function (result) {
        $('#upload').html(result);
    }
    });
    return false;
    });

感谢您的帮助，

马特

Answer 1

您还需要将contentType和processData参数设置为false。

$('#upload').submit(function () {
  var formData = new FormData($('form')[0]);
  form_action = $(this).attr('action');

  $.ajax({
    type: 'post',
    xhr: function () {
      myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
        myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
      }
      return myXhr;
    },
    data: formData,
    url: form_action,
    processData: false,
    contentType: false,
    success: function (result) {
      $('#upload').html(result);
    }
  });
  return false;
});

但是，如果发生错误，表单将继续提交，因为它永远不会到达return false;。要停止它以便您可以看到错误，请使用event.preventDefault。

$('#upload').submit(function (e) {
  e.preventDefault();
  var formData = new FormData($('form')[0]);
  form_action = $(this).attr('action');

  $.ajax({
    type: 'post',
    xhr: function () {
      myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
        myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
      }
      return myXhr;
    },
    data: formData,
    url: form_action,
    processData: false,
    contentType: false,
    success: function (result) {
      $('#upload').html(result);
    }
  });
});

Answer 2

您只是简单地在表单中添加隐藏的输入元素吗？ <input type=hidden name="async" value="true">
...然后，此值将自动成为formData

中序列化数据的一部分

使用async上传ajax文件

2 个答案: