5

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

フィルタは HTML5 ランタイムで正しく動作しないため、使用できません。したがって、以下のコードをFilesAddedイベントにバインドしています

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
    }
});

しかし、これは無効なファイルに対して発生するdom操作を停止していますが、アップロードを開始するとアイテムがすべて送信されるため、実際にキューからアイテムを削除しているようには見えません!

これは、HTML5 と Flash ランタイムの両方で発生しています。私はまだ他のものをテストしていません。

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

4

2 に答える 2

2

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

デバッグの最初のステップは、2012 年 11 月 18 日に github から圧縮されていないバージョンを取得することでした。それができたら、問題を追跡できました。

したがって、主な問題は、への呼び出しが呼び出されなかったことのように見えましたremoveFile()が、なぜですか?

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];
        }
    }
}

わかりました、非常に簡単です。これは files 配列をループし、一致する ID を持つファイルがある場合は splice 関数を呼び出します。

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

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イベントがトリガーされるはずだったのに、なぜトリガーされなかったのでしょうか?

関数に戻ると、前述のように、一致する id が見つかった場合removeFile()にのみ splice が呼び出されます。

したがって、次のステップは、removeFile 関数が呼び出されているかどうかを確認することでした。

最初の行として挿入console.log('removeFile called', files);すると、次の出力が得られました。 removeFile called []

うーん、空の配列です!

わかりました。FilesAddedイベントにバインドすると、通常の動作が停止するようです。問題ありません。バインディングに追加uploader.files.push(file)してみましょう。FilesAddedそして見よ。開始をクリックすると、正しいファイルのみが送信されます。

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

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

それで、簡単console.log(uploader.files.length)に、これはここで何か他のことが起こっていることを確認しました.

次のステップは、ファイルを追加するためのデフォルトのアクションを確認することでした。

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

そのため、バインディングの内部を見るfiles.push(file)と、配列内のすべてのファイルと正しいファイルの複製を取得していたという意味もありました。

バインディングがinit(), 関数で行われていることに注意して、バインディングから を削除し、呼び出しをバインディングの前にuploader.files.push(file)移動しました。そして今、すべてがうまくいきます。init()FilesAdded

于 2012-11-18T04:32:41.170 に答える