4

我在表单中使用Plupload 文件上传器。我想对其进行自定义，以便在提交表单时，即单击“提交”按钮时，首先发生的是文件上传，然后是提交表单。

据我所知，我可能对此有误，但似乎该调用uploader.start()是异步函数调用。所以此刻，上传将开始，表单将在文件上传之前提交。问题是我无法控制这个函数调用。

我最近读到了jQuery 1.5 的新版本和新的Deferred Object，似乎这有可能帮助我解决这个问题。有没有办法等待异步函数调用完成它的工作，然后在调用之后继续执行代码。所以我正在寻找类似以下伪代码的东西......

var uploader = $('#plupload_container').pluploadQueue();

$('#submitButton').click(function() {

   // if there are files to be uploaded, do it
   if (uploader.files.length > 0) {

      // make the call and wait for the uploader to finish
      uploader.start();
      while ( the uploading is not done ) {
         wait for the uploader to finish
      }

      // continue with submission
   }
});

有没有办法“等待”uploader.start()完成，本质上是在单击事件处理程序上暂停，以便可以首先上传所有文件，然后单击事件处理程序的其余部分可以完成执行？我尝试了以下操作，但在文件上传完成之前打印了“完成”...

$.when(uploader.start()).then(function () {
   console.log("done")
});

另一个有用的信息...我可以将某些事件绑定到此uploader对象实例，例如“UploadProgress”或“UploadComplete”。例如，我可以使用延迟对象以某种方式捕获“UploadComplete”事件触发吗？有没有一种 AJAX-y 方式来做到这一点？

谢谢。

4

3 回答 3

5

您的问题是，虽然uploader.start为代码工作做了一些异步操作，但uploader.start必须返回一个 jquery$.deferred对象。

从您的上传插件的最新来源：

/**
 * Starts uploading the queued files.
 *
 * @method start
 */
start : function() {
    if (this.state != plupload.STARTED) {
        this.state = plupload.STARTED;
        this.trigger("StateChanged");
        uploadNext.call(this);
    }
},

所以它不会返回延迟对象。相反，在uploadNext函数中有这行代码：

this.trigger("UploadComplete", files);

所以我们只需要绑定到你的上传器，

uploader.bind("UploadComplete", function(files) {
    // your code
});

我从未使用过该插件，但这应该可以。祝你好运。

如果您必须使用延迟，那么您总是可以使用类似以下的伪代码：

var uploader = $('#plupload_container').pluploadQueue();
var def = $.Deferred();
uploader.bind("UploadComplete", function(files) {
    def.resolve(files);
});
$('#submitButton').click(function() {
   if (uploader.files.length > 0) {
      uploader.start();

      def.done(function(files) {
          def = $.Deferred(); // reset the deferred object.
          // rest of your click handler.
      });

   }
});
于 2011-02-09T17:19:45.947 回答
3

在虚构的上传会话的上下文中：

var files = ["file1.txt", "file2.txt", "file3.txt"];

这些是我们要上传的文件。让我们组装另一个数组，每个数组都有一个延迟对象：

var uploads = files.map(upload_one);

我们用这个延迟对象数组调用 $.when() ，我们还指定每次上传后要做什么，什么时候失败，什么时候一切都完成：

$.when(uploads)
  .progress(function() {
    // report to user, step progress bar, etc
  })
  .fail(function() {
    // display error
  })
  .done(function() {
    // all uploads finished, do stuff
  });

这是每个单独上传的工作函数。它返回延迟对象，并调用成功或错误函数以响应单个上传：

function upload_one(file) {
  var deferred = new $.Deferred();
  // start upload

  // if finished:
  deferred.notify();
  deferred.resolve();

  // if failed:
  deferred.reject();

  return deferred;
}
于 2012-04-07T16:15:38.780 回答
-1

是的。jquery new deferred in ajax api的要点是让你的代码等待其他异步代码。

如果您有多个相互依赖的异步调用，则 deferred 将允许您在它们全部完成后执行某些操作。同样的想法在这里也适用。

于 2011-02-08T15:49:56.923 回答