1

次のデモがあるとします。

jQuery File Upload Basic Plus のデモ

デモに従ってプロジェクトでこれを機能させていますが、各画像の「アップロード」ボタンを削除し、上部に「すべてアップロード」ボタンを追加したいと思います。私の人生では、それを行う方法がわかりません。ドキュメントはかなり薄いです...

たとえば、fileupload オブジェクトへのハンドルを作成して、var fileUpload = $('#fileupload').fileupload({fileUpload.send(); のようなものを呼び出そうとしました。しかし、「オブジェクトにメソッド「send」が含まれていません」というメッセージが表示されます

4

2 に答える 2

2

実用的なソリューションは次のとおりです。jquery file upload blueimpですべてアップロードを開始します

重要なのは、ここの他の記事が示唆するように、「追加」オプションではなく、「完了」オプションでクリックイベントのバインドを解除することです。

done: function (e, data) {
        $("#uploadBtn").off('click')
        $.each(data.result, function (index, file) {
            $('<p/>').text(file.name).appendTo(document.body);
        });
    },
add: function (e, data) {
        $("#uploadBtn").on('click',function () {
            data.submit();
        });
    }

もう 1 つのオプションは、個々のアップロード ボタンにクラスを与え、css 表示を none に設定して非表示にし、クリックを upload_all クリックにバインドすることです。

//Put this button code next to your button (or span mimicking button) that adds files to the queue.
<button id="upload_all" type="submit" class="btn btn-primary start">
    <i class="glyphicon glyphicon-upload"></i>
    <span>Start upload</span>
</button>

//Give your buttons a class and set their display to none.
var uploadButton = $('<button/>', { 
                       class:"upload", 
                       style:"display:none" 
                   })
                   .on('click', function () {
                        var $this = $(this),
                        data = $this.data();
                        data.submit().always(function () {      
                            $this.remove();
                        });
                   });

//Bind their click to the click of your upload_all button. 
$('#upload_all').on('click', function() {
     $('.upload').click();
});
于 2016-01-05T20:17:07.803 に答える