pluploadキューからファイルを削除しますか？

Question

pluploadを使用してアップロードできるファイル拡張子を制限しようとしています。

フィルタはHTML5ランタイムで正常に動作しないため、使用できません。したがって、私は

var extensionArray = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx']; 
uploader.bind('FilesAdded', function (up, files) { 
    var invalid = 0; 
    for (var i in files) { 
     var extension = files[i].name 
           .substr((files[i].name.lastIndexOf('.') + 1)) 
           .toLowerCase(); 

     if (extension == '' || -1 === $.inArray(extension, extensionArray)) { 
      uploader.splice(i, 1); //also tried uploader.removeFile(files[i]) 
      invalid++; 
      continue; 
     } 
     //dom manipulation to add file occurs here 
    } 
}); 

FilesAddedイベントにバインドさ以下のコードを持っている。しかし、これは、無効なファイルのためにoccuring DOM操作を停止している間、それは実際に私が開始するときのように、キューから項目を削除していないようです彼らはすべてアップロードされます！

これはHTML5とFlash Runtimeの両方で発生しています。私はまだ他の人をテストしていない。

FilesRemovedイベントにバインドすると、決してトリガーされません！ uploader.splice(...の直前にconsole.log('Invalid files detected');を挿入するとコンソールに出力され、その行が呼び出されます。

Answer 1

短いバージョン：の後にfilesAddedイベントにバインドする必要があります。init()関数を呼び出します。

デバッグのための私の最初のステップは、グラブを取得することでしたthe uncompressed version off github^{18 11月2012}。一度私はそれを追跡することができたことがあった。

したがって、removeFile()への呼び出しが決して呼び出されていないことが主な問題でしたが、なぜですか？

removeFile: function (file) { 
    var i; 

    for (i = files.length - 1; i >= 0; i--) { 
     if (files[i].id === file.id) { 
      return this.splice(i, 1)[0]; 
     } 
    } 
} 

は、[OK]を、非常に単純な、これはファイルの配列をループして、一致するIDを持つファイルがある場合、我々は、スプライス関数を呼び出しますよう

removeFile()

が定義されました。

スプライスはどのように見えますか？

splice()は以下のように定義された：

splice:function (start, length) { 
    var removed; 

    // Splice and trigger events 
    removed = files.splice(start === undef ? 0 : start, length === undef ? files.length : length); 

    this.trigger("FilesRemoved", removed); 
    this.trigger("QueueChanged"); 

    return removed; 
} 

右、そうFilesRemovedイベントがトリガされている必要があり、なぜそれができなかったところ、それはありますか？

removeFile()関数に戻ると、一致するIDがの場合にのみ、スプライスが呼び出されます。

したがって、次のステップは、removeFile関数が呼び出されたかどうかを調べることでした。 removeFile called []

うーん、空の配列：最初の行としてconsole.log('removeFile called', files);を挿入

は私たちに出力を与えました！

[OK]をクリックすると、FilesAddedイベントにバインドしているように見えますが、通常の動作は停止していますが問題ありません。私たちのFilesAddedバインディングにuploader.files.push(file)を追加しましょう。そして見て、見なさい。スタートをクリックすると、正しいファイルだけが送信されます。

これは機能しています...しかしそれほどではありません。
デバッグ目的のためにいくつか余分なバインディングがありましたが、そのうちの1つはQueueChangedでした。これにより、変更が発生するたびにキューにファイルの量が記録されました。

私が気づいたのは、キュー内のファイルの数が実際にキューからファイルが削除されたことを反映していないことでした。

したがって、すばやくconsole.log(uploader.files.length)とここで何か他のことが起こっていることが確認されました。

次の手順では、ファイルを追加するためのデフォルトのアクションを調べました。

私は、開発者がイベントにバインドすることを決めたことに気付きました。これをinit関数の内部で行いました。私の視点から見ると奇妙な選択です。しかし、それは彼らの選択です。

したがって、それらのバインディングの中にはfiles.push(file)という文字列が含まれていて、配列内のすべてのファイルと正しいファイルの複製が得られています。結合がinit()、関数の中で起こっていた、私は私の結合からuploader.files.push(file)を除去したことに留意

は、私のFilesAdded結合する前にinit()コールを移動しました。今はすべてうまくいく。

Answer 2

uploader=newplupload.Uploader({ 
//----- 
}); 

uploader.bind('FilesAdded',function(up,files) 
{ 
//---- 
up.refresh();//RepositionFlash/Silverlight 
}); 

uploader.bind('QueueChanged',function(up,files){ 

//#doc-filelist is the id of dive, which shows the Queue 
$('#doc-filelist').html(''); 

$.each(uploader.files,function(i,file){ 
$('#doc-filelist').append(
'<div id="'+file.id+'">'+ 
file.name+'('+plupload.formatSize(file.size)+')<b></b>'+ 
'<spanclass="remove_file"data-file="'+i+'">X</span>'+ 
'</div>'); 
}); 

if(uploader.files.length==0){ 
// #uploadfiles button for start upload 
$('#uploadfiles').addClass('disabled'); 
} 

}); 

uploader.bind('UploadComplete', function (up, file) { 
    up.splice(); 
    up.refresh(); 

}); 


$('.relevant-document').on('click','.remove_file',function(e){ 

uploader.splice($(this).attr('data-file'),1); 

uploader.refresh(); 
});