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. 删除“multiple”属性
2. 将 id 添加到表中，
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

将实际输入字段限制为单个文件上传怎么样？

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

Answer 6

我就是这样做的：

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