3

一度に複数のファイルをアップロードしたいとします。これは、multiple オプションを true に設定すると実行できます。

var myUploader = new qq.FineUploader({
    element: $('#test')[0],
    multiple: true,
    request: { endpoint: 'path/to/master/server/php/' },
    autoUpload: false,
});

ここで、アップロードするファイルを選択できるボタンがあるとします。上記のボタンをクリックして、たとえば test.txt ファイルを選択すると、アップロードされるファイルのリストに test.txt が追加されます。ここまでは順調ですね。さて、私の問題は、ボタンをもう一度クリックしてtest.txtファイルをもう一度選択すると、すでにリストにあるにもかかわらずリストに追加されることです。

FineUploader がこれをさせないようにする方法はありますか?

前もって感謝します

4

1 に答える 1

3

単純に名前に基づいて、ファイルを重複として宣言することに注意してください。少なくとも、サイズも考慮する必要があります。ただし、IE9 以前のブラウザではクライアント側でファイル サイズを判断できないため、これは不可能です。簡単にするために、ファイル名のみを使用しましょう...

1 つの方法は、アップローダに送信されたファイル名の配列を維持することです。onSubmittedハンドラーでこのリストに追加できます。onValidateファイルが配列に既に存在する場合、ファイルを拒否するハンドラーを提供できます。コードは次のようになります。

var filenames = [];
var myUploader = new qq.FineUploader({
    element: $('#test')[0],
    multiple: true,
    request: { endpoint: 'path/to/master/server/php/' },
    autoUpload: false,
    callbacks: {
        onSubmitted: function(id, name) {
            filenames.push(name);
        },
        onValidate: function(fileData) {
            return qq.indexOf(filenames, fileData.name) < 0;
        }
    }
});

また、プロジェクトですでに jQuery を使用しているように見えるので、Fine Uploader の jQuery プラグインを使用してみませんか? 上記の例は、以下の jQuery プラグインを使用して書き直されています。

var filenames = [];
$('#test').fineUploader({
    multiple: true,
    request: { endpoint: 'path/to/master/server/php/' },
    autoUpload: false
})
    .on("submitted", function(event, id, name) {
        filenames.push(name);    
    })
    .on("validate", function(event, fileData) {
        return $.inArray(fileData.name, filenames) < 0;
    });
于 2013-05-09T21:53:19.800 に答える