使用 ajaxForm 插件提交 FormData答案

【问题标题】：Submit FormData with ajaxForm plugin使用 ajaxForm 插件提交 FormData
【发布时间】：2013-10-18 03:49:35
【问题描述】：

如何将FormData对象放入表单并使用ajaxForm插件提交？我正在尝试执行以下操作：

var fd = new FormData();
fd.append('photo', file);
var form = $("<form method='POST' action='url.php' enctype='multipart/form-data'></form>");

将fd formData作为对象添加到表单中，并通过以下方式将表单转换为ajaxForm：

form.ajaxForm({
      beforeSend: function(e) {},
      uploadProgress: function(event, position, total, percentComplete) {},
      complete: function(data) {}
});

然后提交表单。所以在 url.php 我可以通过 $_FILES['photo'];

【问题讨论】：

见blog.new-bamboo.co.uk/2012/01/10/…
嗯，我知道怎么用纯ajax发布FormData，但是在这种情况下我需要通过ajaxForm发布，因为我需要beforeSend、uploadProgress、complete函数等回调函数，只能由 ajaxForm 实现。

标签： jquery forms ajaxform form-data

【解决方案1】：

您可以像普通的 ajax 帖子一样直接发送数据..

喜欢 ..

form.ajaxForm({
  data: { data: fd }, 
  beforeSubmit:function() { 

    } 
  beforeSend: function(e) {},
  uploadProgress: function(event, position, total, percentComplete) {},
  complete: function(data) {}
});

我已经测试过了，它工作正常..

【讨论】：

我也试过你的方法，但总是返回“Uncaught TypeError: Illegal invocation”，所以我考虑是否有其他方法可以解决这种情况？这是我当前的代码：
$("#upload_file").change(function(){ var filelist = $(this).context.files; for( var i = 0; i < filelist.length; ++i ) { var fd = new FormData(); fd.append('photo', filelist[i]); var form = $("<form method='POST' action='url.text' enctype='multipart/form-data'></form>"); create_ajax_form(form, fd); } } function create_ajax_form(obj, fd){ obj.ajaxForm({ data: { data: fd }, beforeSend: function(e) {}, uploadProgress: function(event, position, total, percentComplete) {}, complete: function(data) {} }); }
我已经尝试过正常使用普通的ajax post，我可以成功获取文件，但没有使用ajaxForm。
我发现了问题，我只是把“data”和“formData”的ajaxForm弄乱了，我把“data”改成“formData”后就正常了

【解决方案2】：

这对我有用

var fd = new FormData(this);
fd.append('upload', file);

$(this).ajaxSubmit({
    formData: fd,
    ...
});

【讨论】：