jQuery ajaxForm 在 div 上的文件拖放上触发文件上传

Question

我使用jquery表单插件进行ajax文件上传，如下所示:

  <form enctype="multipart/form-data" action="upload.php" id="form" method="post">
    <input type="file" name="upfile" size="44" />
    <input name="submit" type="submit" id="upload" value="Upload" enabled>
  </form>

接下来这个魔法让它发挥作用:

// ... lots of option for begin, progress, complete events ...
$("#form").ajaxForm(options);

现在的问题是，我想使用 onDrop 事件来处理文件上传，到目前为止我所拥有的:

dz.addEventListener('drop', function(e){
  FileDropHandler(e); // to prevent file download
  $('#dropzone').removeClass('over');

  var files = event.dataTransfer.files;
  alert(JSON.stringify(files[0]));

}, false);

现在，我如何告诉 ajaxForm 使用拖放的文件进行上传？

Answer 1

文件拖放后，保存变量 files 以便稍后可以通过 ajaxSubmit 访问它。然后只需将其发送为 extra data

$(this).ajaxSubmit({
    data: {files:files}
})