web-dev-qa-db-ja.com

Plupload-1つのファイルのみに制限

アップロードされるファイルの数を任意の数、さらには1つに制限するオプションがpluploadAPIドキュメントに表示されません。

Docは失敗しますか？または機能が失敗しますか？それが存在しない場合、誰かがそれを必要とするならば、私はそれを実現するために取り組んでいます。

javascriptplupload
24
JohnO

それは機能の失敗です。 jQuery APIのラッパーを作成しました。これは、jQueryAPIを機能させるために行ったことです。私のコードは他のビジネスロジックを実行しますが、開始するのに十分なはずです。

基本的に、FilesAddedイベントにバインドし、アップローダーオブジェクトでremoveFileを呼び出します（ファイルが多すぎる場合）。ファイルがまだ存在しないという問題が発生したため、50ミリ秒のタイムアウトを追加したと思います。

uploader.bind('FilesAdded', function (up, files) {
    var i = up.files.length,
        maxCountError = false;

    plupload.each(files, function (file) {

        if(uploader.settings.max_file_count && i >= uploader.settings.max_file_count){
            maxCountError = true;
            setTimeout(function(){ up.removeFile(file); }, 50);
        }else{
            // Code to add pending file details, if you want
        }

        i++;
    });

    if(maxCountError){
        // Too many files uploaded, do something
    }

});

max_file_countは、作成時にpluploaderインスタンスに追加するものです。

編集：私は実際にこれのために2つの異なる方法をしなければなりませんでした。上記では、特定の数のファイルのみをアップロードできます（それ以外の場合はエラーが発生します）。

このスニペットは同様に機能しますが、既存のファイルを削除し、最新のもののみをアップロードします。

uploader.bind('FilesAdded', function (up, files) {
    var fileCount = up.files.length,
        i = 0,
        ids = $.map(up.files, function (item) { return item.id; });

    for (i = 0; i < fileCount; i++) {
        uploader.removeFile(uploader.getFile(ids[i]));
    }

    // Do something with file details
});
20
Jonathon Bolster

これを行う他の方法：

 $(document).ready(function () {
    var uploader = new plupload.Uploader({
        ...
        multi_selection: false,
       ....
     });

よろしく

20
octavioccl

Jonathon Bolsterの2番目の回答に基づいて、最後に選択したファイルへのアップロードを制限するために、この単純なスニペットを作成しました。

uploader.bind('FilesAdded', function(up, files) {
    while (up.files.length > 1) {
        up.removeFile(up.files[0]);
    }
});
13
JoaoPSF

これを使用できますmax_file_count: 5ここで、5はアップロードカウントの最大数です。

6
coder

なぜだけではないのですか

    if (files.length > 1) uploader.splice(1, files.length - 1);
3
8bitjoey

multi_selectionオプションをfalseに設定することで、複数選択を無効にできるようになりました

ちょうどこのような

var uploader = new plupload.Uploader({
    runtimes : 'html5,flash',
    browse_button : 'button_id',
    multi_selection:false,  //disable multi-selection
...

公式ドキュメントはこちら： http://www.plupload.com/documentation.php

2
chuck911

これを試して。それは私にとってはうまくいきます。

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

if(uploader.files.length > 1)
{
    uploader.removeFile(uploader.files[0]);
    uploader.refresh();// must refresh for flash runtime
}

。 。 。レスト

アイデアは、現在のアップローダーオブジェクトでnumファイルをテストすることです。長さが1より大きい場合は、メソッドuploader.removeFileを使用してください。引数はfiles[0]であり、ファイルIDではなく、完全なファイルオブジェクトであることに注意してください。

({id:"p17bqh1v4dp42gdf1gan75p16tp3", name:"gnome-globe.png", size:48456, loaded:0, percent:0, status:1})

宜しくお願いします！

2
Vladimir Djuricic
    FilesAdded: function(up, files) {
        up.files.splice(0,up.files.length-1);
    },
    multi_selection: false,

使用する up.files、ただfiles。 filesには、ファイルブラウザから選択した単一のアイテムが常に含まれます。 up.filesは、最後に選択したファイルに縮小する必要がある実際のリストです。

2
Sheikh Abdul Wahid

カスタムアップローダーを使用して、一度に1つのファイルをアップロードする場合、自動アップロードは行わず、最後に追加されたファイルが新しいファイルになります。これを使用します。

uploader.bind('FilesAdded', function(up, files) {
    // Clear the HTML
    $('#plupload-files').html('');

    // Plup does not offer before file added event
    if (up.files.length > 1) {
        up.splice(0, up.files.length);
        up.addFile(files[0])
        return;
    }

    // $.each(files, function(){....
}

Plupはすでにすべてのファイルをキューに追加しているため、配列全体をスプライスします。受け入れられた回答のようにキューをスプライスすると、ユーザーがファイルを追加しようとするたびに実際に1つのファイルが追加され、新しいファイルを単独で追加しようとすると、古いファイルをファイル配列のpos [0]に保持します。

次に、追加しようとしたファイルの最初のファイルを追加します。このように、キューにはファイルが1つだけあり、それは常に、追加しようとした最後のファイルグループの最初のファイルです。

すなわち。

Pluploadにドラッグします 'file1.jpg'、 'file2.jpg'、 'file3.jpg'

キュー全体をクリアし、「file1.jpg」を追加し直します

Pluploadにドラッグします 'file4.jpg'、 'file5.jpg'、 'file6.jpg'

キュー全体をクリアし、「file4.jpg」を追加し直します

Plupload'file99.jpg 'にドラッグします

キュー全体をクリアし、「file99.jpg」を追加し直します

これにより、一度に1つのファイルのみをアップロードする場合に、カスタムplupを管理できます。述べたように、他の答えは一度だけ、または自動開始アップロードで機能します。

1
Simon Ilett

アップロードできるファイルは1つだけです。

uploader.bind('FilesAdded', function(up, files) {
    $.each(files, function(i, file) {
        if(uploader.files.length!=1){uploader.removeFile(file); return;}
    });
});

一度に1つのファイルを選択できるようにします。

uploader.bind('FilesAdded', function(up, files) {
    $.each(files, function(i, file) {
        if(i){up.removeFile(file); return;}
    });
});

1つのファイルを一度にアップロードできるようにします。

uploader.bind('FilesAdded', function(up, files) {
    $.each(files, function(i, file) {
        if(uploader.files.length!=1){uploader.removeFile(file); return;}
    });
});
uploader.bind('FileUploaded', function(up, file,response) {
    up.removeFile(file);
});
1
user669677

私はこれが答えられたことに気づきました、しかし私が行った解決策はただQueueChangedコールバックを使うことでした：

QueueChanged: function(uploader) {
    // Called when queue is changed by adding or removing files
    //log('[QueueChanged]');
    if(uploader.files.length > 1) {
        uploader.files.splice(0, (parseInt(uploader.files.length) - 1));
    }
}

このコードでは、最後に選択されたファイルのみが保持されます（再度選択した理由が、間違ったファイルを選択したためである場合）。

1
James

アップロードする前に、不要なファイルを直接削除します。

$('uploadfiles').onclick = function()
            {
                while (uploader.files.length > 1)
                {
                        uploader.removeFile(uploader.files[0]);
                }

                uploader.start();
                return false;
            };
0
Mikhail Shiryaev

それぞれの解決策を試した後、私はすべての中で最も単純なものを思いつきました-それはうまくいくようです。

コアAPIを使用していて、multi_selectionをfalseに設定しています。次に、最初のファイルが選択（追加）された後、FilesAddedイベントに挿入した2行目のコードが、参照リンクを非表示にします。これはjqueryウィジェットでは実行できないと思います。また、アップロードリンクが参照リンクの場所をカバーしていない限り、それは存続していることもわかりました。

uploader.bind('FilesAdded', function(up, files) {
//line below hides button
document.getElementById("browse").style.display = "none";

var html = '';
plupload.each(files, function(file) {
html += '<li id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></li>';
});
document.getElementById('filelist').innerHTML += html;

}）;

0
JaneH