jQuery FileUploadUI Загрузка одного файла

Question

я использую fileuploadui (https://github.com/blueimp/jQuery-File-Upload) для загрузки файлов на мой сайт, но я бы хотел, чтобы он загружал только 1 файл, а не несколько.

Я удалил «несколько» из входного тега html (тип ввода = «файл», имя = «файл»), но очередь все еще принимает более 1 файла.

Я имею в виду, что всякий раз, когда кто-то нажимает кнопку «Обзор файла», он заменяет текущую очередь новым файлом. это будет навсегда 1 файл в очереди.

как использовать функцию replaceNode?

спасибо.

Answer 1

Попробуйте это:

$('#file_upload').fileUploadUIX({
    maxNumberOfFiles: 1
});

Надеюсь, что это работает ^^

Answer 2

Благодаря @TopDev,

1. Удалите атрибут «несколько» <input type="file" name="files[]">
2. Добавьте идентификатор в таблицу, <tbody id="filelistholder" class="files">
3. Внутри циклавнизу добавьте {% for (var i=0, file; file=o.files[i]; i++) { %} {% $('#filelistholder').empty(); %}

Answer 3

Я добавил следующее в функцию добавления:

$('#filelistholder').empty();

Это очистит контейнер списка файлов при каждом добавлении нового файла, гарантируя, что останется только последний файл.

Надеюсь, это поможет.

Таким образом, полный код будет выглядеть следующим образом:

<script type="text/javascript">
        $(function () {
            $('#fileupload').fileupload({
                dataType: "json",
                url: "/api/upload",
                limitConcurrentUploads: 1,
                maxNumberOfFiles: 1,
                sequentialUploads: true,
                progressInterval: 100,
                maxChunkSize: 10000,
                add: function (e, data) {
                    ///empty fie container every time a new file is added
                    $('#filelistholder').empty();
                    //add new file
                    $('#filelistholder').removeClass('hide');
                    data.context = $('<div />').text(data.files[0].name).appendTo('#filelistholder');
                    $('</div><div class="progress"><div class="bar" style="width:0%"></div></div>').appendTo(data.context);
                    $('#btnUploadAll').click(function () {
                        data.submit();
                    });

                },
                done: function (e, data) {
                    data.context.text(data.files[0].name + '... Completed');
                    $('</div><div class="progress"><div class="bar" style="width:100%"></div></div>').appendTo(data.context);
                },
                progressall: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#overallbar').css('width', progress + '%');
                },
                progress: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    data.context.find('.bar').css('width', progress + '%');
                }
            });
        });
    </script>

Answer 4

Ответ для углового и машинописного текста (легко адаптировать для машинописного текста).Это работает для меня.

<span class="btn btn-success fileinput-button" type="reset" ng-click="ctrl.formReset(this)">
<i class="glyphicon glyphicon-plus"></i>
<span>Add file...</span>
<input type="file" name="file" ng-disabled="disabled">
</span>

В контроллере (машинопись)

formReset(uploadScope):void{
    uploadScope.clear()
    uploadScope.queue = []
}

maxNumberOfFiles: 1, удаление «множественного» и настройки name = «file» также не было задано.

Answer 5

вот как я это сделал:

    //flag for limiting to 1 single file 
    var uploading;
    $('#file1').fileupload({
        dataType: 'json',
        done: function(e, data) {
        //...
        },
        progressall: function(e, data) {
        },
        add: function (e, data) {
            if (!uploading) {
                uploading = 1;
                console.log('add');
                data.submit();
            } else {
                console.log('cancel');
            }
        },
        always: function() {
            uploading = 0;
        },
        sequentialUploads: true
    });

Answer 6

Как насчет того, чтобы ограничить поле ввода одной загрузкой файла?

<%= f.file_field :image, :multiple => false %>