キャンセルアップロードを追加するか、複数のファイルアップロードプラグインをブートストラップする機能を中止します。

Question

ファイルをアップロードするのにbootstrap multiple file upload pluginを使用しています。私はこのリンクにある例を使用しています。今度は「ファイルを追加」ボタンの他​​に「キャンセル」ボタンを追加したいと思います。 [アップロードをキャンセル]ボタンをクリックすると、アップロードプロセスが停止されます。この問題を回避するために私を助けてください。

var jqXHR = $('#fileupload').fileupload('send', {files: filesList}) 
    .error(function (jqXHR, textStatus, errorThrown) { 
     if (errorThrown === 'abort') { 
      alert('File Upload has been canceled'); 
     } 
    }); 
$('button.cancel').click(function (e) { 
    jqXHR.abort(); 
}); 

、プログラム（mannually）ファイルをアップロードする手段上記のコード：ありがとう

Answer 1

最後に、大規模な試行錯誤の後、関連するコードソリューションを探し、Iそれは私が欲しかったのとまったく同じように働いた！私はplugin's github issue pageに私の質問を掲示し、そこから助けを得ました。以下は

本当に働いていたコードサンプルです：

1.Firstあなたがfileuploadaddイベントをバインドする必要があります。

$('#fileupload').bind('fileuploadadd', function(e, data){ 
     var jqXHR = data.submit(); // Catching the upload process of every file 
     $('#cancel_all').on('click',function(e){ 
      jqXHR.abort(); 
     }); 
}); 

2.Thenあなたが呼び出されますcancelイベントをバインドする必要があります[アップロードのキャンセル]ボタンをクリックすると、現在アップロードされているすべてのファイルがキャンセルされます：

$('#fileupload').bind('fileuploadfail', function(e, data){ 
    if (data.errorThrown === 'abort') 
    { 
     //PUT HERE SOME FEEDBACK FOR THE USER 
    } 
}); 

Answer 2

は、私はここにコードを投稿 、あなたがhereからプラグインのドキュメントにあなたの答えを見つけることができると思います。このような場合、fileupload関数の場合、2番目の引数はFileプロパティまたはBlobオブジェクトの配列（または配列のようなリスト）を持つオブジェクトでなければなりません。だから、あなたは上記のコードを実行する前にファイルの配列を取得する必要があります。

var filesList = $("#fileupload").get().files; 

私はあなたが以下のように配列にファイルリストを変換する必要があるかどうかわからないんだけど、あなたは試すことができます：

var i,files = $("#fileupload").get().files,filesList=[]; 
for(i=0;i<files.length;i++){ 
    filesList.push(files.item(i)) 
} 

しかし、ここには制限があることに注意してください： ファイルはIE10 +やその他の最新のブラウザでのみサポートされています。

詳細については、私はここにいくつかの記事をリスト：

1. jQuery-File-Upload Programmatic file upload
2. Using files from web application
3. FileList API