16

私はBlueimp の jQuery-File-Uploadプラグインを試していますが、デモから判断すると非常に有望に見えます。

実装はとても簡単です:

var $uploadButton = $("#fileop-upload");// <input type="file" id="fileop-upload" [etc] />
$uploadButton.fileupload({
    url : "//domain/path/to/receive-uploaded-files"
});

選択したファイルは、期待どおりにページを更新せずに正常にアップロードされますが、もちろん、このような最小限の構成では、ユーザーは通知を受け取りません。ここで、プラグインのコールバックが役に立ちます。

ドキュメントによると、コールバックを定義するには 2 つの方法があります。たとえば、addイベント (ファイルがアップロード用に選択されるたびに発生する) は、次のように元の構成オブジェクトに追加できます。

$uploadButton.fileupload({
    add : addFileListener,
    url : "//domain/path/to/receive-uploaded-files"
});

または代わりに：

$uploadButton.bind("fileuploadadd", addFileListener);

ただし、最初のアプローチのみが機能し、2 番目のアプローチは何もしないことがわかりました。

さらに興味深いのは、どのようにバインドしても、他のコールバック (特にprogressと) が起動していないように見えることです。start

$uploadButton.fileupload({
    add : addFileListener,
    progress : progressListener,
    start : startListener,
    url : "//domain/path/to/receive-uploaded-files"
});

また

$uploadButton.fileupload({
    add : addFileListener,
    url : "//domain/path/to/receive-uploaded-files"
});
$uploadButton.bind("fileuploadprogress", progressListener");
$uploadButton.bind("fileuploadstart", startListener");

参照されたリスナー関数を定義しましたが、コードはエラーや警告を報告しません。

メソッドが失敗した理由は何ですか?また、またはリスナーがアクティブに.bindならないのはなぜですか?progressstart

4

5 に答える 5

34

私は jQuery File Upload プラグインの作成者です。

3 番目のサンプル コードで fileuploadadd イベントが発生しない理由について説明がありません。ただし、追加コールバック オプションをオーバーライドする場合は、追加コールバックのオプション ドキュメントで説明されているように (また、プラグイン）。

たとえば、次のコードはさまざまなコールバック イベントを出力する必要があります。

$('#fileupload').fileupload({
    add: function (e, data) {
        console.log('add');
        data.submit();
    },
    progress: function (e, data) {
        console.log('progress');
    },
    start: function (e) {
        console.log('start');
    }
}).bind('fileuploadadd', function (e, data) {
    console.log('fileuploadadd');
}).bind('fileuploadprogress', function (e, data) {
    console.log('fileuploadprogress');
}).bind('fileuploadstart', function (e) {
    console.log('fileuploadstart');
});

また、プラグインはモジュール式であり、UI バージョン (ダウンロード例で使用) は、上記のコードでオーバーライドされるコールバック オプションを使用することにも注意してください。オプション オブジェクトを介して設定されたコールバックをオーバーライドせずに、追加のコールバック メソッドを定義できるため、イベント バインディングが非常に便利なのはそのためです。

于 2011-08-07T15:26:12.327 に答える
4

これは私にはうまくいきませんでした。

$('#fileupload').fileupload({url: '/url/to/server/'});

$('#fileupload').bind('fileuploaddone', function (e, data) {
   console.log('success!!!');

   console.log(e);

   console.log(data);

});

しかし、これはやった！

$('#fileupload').fileupload({url: '/url/to/server/'}).bind('fileuploaddone', function (e, data) {
   console.log('success!!!');

   console.log(e);

   console.log(data);

});

私の最初の推測では、最初のケースでは、イベントを fileupload オブジェクトではなく実際のフォーム入力にバインドしています。2 番目のケースでは、連鎖を使用して、実際に fileupload オブジェクトを使用しています。 :

$('#fileupload').bind('fileuploadadd', function (e, data) {/* ... */});

そして、それは読むべきです

$('#fileupload').fileupload().bind('fileuploadadd', function (e, data) {/* ... */});
于 2013-10-07T22:58:28.560 に答える
2

add イベントが定義されている場合、すべてのプロセス コールバックは起動しません。

$(function(){
    var fileupload=$('#fileupload').fileupload({
        url: 'fileupload.php',
        dataType: 'json',
        add: function(e, data) {
            data.submit();
        },
    })
    .on('fileuploadprocessalways', function (e, data) {
        //Won't be triggered if add callback is defined
    })
});
于 2015-10-19T13:42:39.593 に答える
0

それ以外の、

$('#fileupload').bind('fileuploadadd', function (e, data) {/*...*/});

私が使った、

$('#fileupload').bind('fileuploadchange', function (e, data) {/*...*/});

そしてそれは私のために働いた。

于 2014-06-03T14:23:23.660 に答える
0

これで問題が解決するかどうかはわかりませんが、私にとっては、次の方法は機能しません (ドキュメントに従って機能するはずです:

$uploadButton.bind 'fileuploadchange', (e, data) =>
  # Do something

ただし、次のように動作します。

$uploadButton.bind 'change', (e, data) =>
  # Do something
于 2012-05-15T20:21:38.983 に答える