4

フォーム内でPluploadファイルアップローダーを使用しています。フォームが送信されたとき、つまり[送信]ボタンがクリックされたときに、最初にファイルのアップロードが行われ、次にフォームが送信されるようにカスタマイズしたいと思います。

私の知る限り、これは間違っているかもしれませんが、この呼び出しuploader.start()は非同期関数呼び出しのようです。そのため、現時点では、ファイルがアップロードされる前にアップロードが開始され、フォームが送信されます。問題は、この関数呼び出しを制御できないことです。

最近、jQuery 1.5の新しいリリースと新しい遅延オブジェクトについて読みましたが、これはこの問題の解決に役立つ可能性があるようです。非同期関数呼び出しがその作業を終了するのを待って、呼び出し後にコードの実行を続行する方法はありますか？だから私は次の擬似コードのようなものを探しています...

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()。基本的に、クリックイベントハンドラーを一時停止して、すべてのファイルを最初にアップロードしてから、残りのクリックイベントハンドラーの実行を終了できるようにします。次のことを試しましたが、ファイルのアップロードが完了する前に「done」が出力されます...

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

もう1つの有用な情報... uploader「UploadProgress」や「UploadComplete」などの特定のイベントをこのオブジェクトインスタンスにバインドできます。たとえば、Deferred Objectを使用して、「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

はい。ajax apiで延期されたjqueryの新しいポイントは、コードが他の非同期コードを待機できるようにすることです。

相互に依存する複数の非同期呼び出しがある場合、deferredを使用すると、すべてが完了した後に何らかのアクションを実行できます。同じ考えがここでも当てはまります。

于 2011-02-08T15:49:56.923 に答える