2012-03-14 30 views
3

私は青いimpのjqueryファイルのアップロードプラグインを実装しようとしています:https://github.com/blueimp/jQuery-File-Upload/多くの場合、ドキュメントは非常に詳細ですが、私にとってはjqueryを理解できないようにしています。jquery file upload plugin:コールバックの使い方

私は基本的にjqueryでほとんどゼロの経験を言うことができると思うので、誰かが私を助けたり、私に彼を与えることができたら、私は非常に嬉しいだろう!

私はそれがウィキにあるよう基本的な実装を設定しようとしたindex.htmlとして次保存している:私はやりたいこと

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>jQuery File Upload Example</title> 
</head> 

<body> 

<input id="fileupload" type="file" name="files[]" multiple> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="js/vendor/jquery.ui.widget.js"></script> 
<script src="js/jquery.iframe-transport.js"></script> 
<script src="js/jquery.fileupload.js"></script> 
<script> 

$(function() { 
    $('#fileupload').fileupload({ 
     dataType: 'json', 
     url: 'server/php/', 
     done: function (e, data) { 
      $.each(data.result, function (index, file) { 
       $('<p/>').text(file.name).appendTo(document.body); 
      }); 
     } 
    }); 
}); 

</script> 

</body> 
</html> 

は同じにアップロードされた画像を示していますページ。私は、アップロードが完了したらコールバックでこれを行う必要があると思った。しかし、私はコードをどこに置くべきかわかりません...

私は単純に警告ボックスを取得しようとしましたが、このコードを追加しようとしました。 UPDATE:これは動作するようになりました:(:まだ動作しませんUPDATE):

$('#fileupload').fileupload('disable'); 

それはしかし、効果なしで、ウィキに言われているよう

$('#fileupload').bind('fileuploaddone', function (e, data) {alert("Message","Titel")}); 

私はまた、単に使用しようとしました。

私は間違った場所にコードを使用していますか?コード自体はOKであるはずです...

どのようなヒントもありがとうございます!

答えて

1

'fileuploadcompleted'にバインドすると、画像がアップロードされたときにアクションが開始されます。

これは、バインドをファイルアップロードの最後に連鎖させることで実行できます。 例えば:

$('#fileupload').fileupload({ 
    dataType: 'json', 
    url: 'server/php/', 
    done: function (e, data) { 
     $.each(data.result, function (index, file) { 
      $('<p/>').text(file.name).appendTo(document.body); 
     }); 
    } 
}).bind('fileuploadcompleted', function (e, data) {alert("Message","Title")}); 

それともどこでも使用して、ファイルアップロード機能の呼び出し以下:

2

あなたはfileuploadprogressallコールバック関数を使用してロードされ、総データ内で比較することができます:

$('#fileupload').fileupload({ 
    ... 
}).bind('fileuploadprogressall', function (e, data) { 
     if(data.loaded==data.total) { 
      console.log("All photos have been done"); 
     } 
}); 
関連する問題