jQuery FileUploadUI 单文件上传答案

【问题标题】：jQuery FileUploadUI Single File UploadjQuery FileUploadUI 单文件上传
【发布时间】：2016-05-09 22:05:52
【问题描述】：

我使用 fileuploadui (https://github.com/blueimp/jQuery-File-Upload) 为我的网站上传文件，但我想让它只上传到 1 个文件，而不是多个。

我已从输入 html 标记（输入类型 =“文件”名称 =“文件”）中删除“多个”，但队列仍然接受超过 1 个文件。

我想到的是，每当有人单击“浏览文件”按钮时，它都会用新文件替换当前队列。它将永远是队列中的 1 个文件。

如何使用 replaceNode 功能？

谢谢。

【问题讨论】：

标签： jquery file-upload

【解决方案1】：

试试这个：

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

希望它有效^^

【讨论】：

不起作用。以前试过。我仍然可以点击浏览按钮，选择 1 个文件，它仍然会添加到队列中。
这仅适用于 ui 版本的 jquery 上传，它不适用于基本的 jquery.fileupload.js 插件

【解决方案2】：

感谢@TopDev，

删除“多个”属性<input type="file" name="files[]">
将id添加到表中，<tbody id="filelistholder" class="files">
在底部循环内，添加{% for (var i=0, file; file=o.files[i]; i++) { %} {% $('#filelistholder').empty(); %}

【讨论】：

【解决方案3】：

我在add函数中添加了以下内容：

$('#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>

【讨论】：

你能提供你的html代码吗？您的解决方案看起来很干净并且很有意义，但我有点困惑#filelistholder 到底是什么？你自己写这个div吗？我正在使用 $("table tbody.files").empty();...这是同一件事吗？
ok nvm 我知道了。谢谢分享。它为我清除了很多东西。

【解决方案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，去掉“multiple”，设置name="file"也不行。

【讨论】：

我尝试了所有其他有关角度实现的建议，但没有任何效果，但确实如此。谢谢！

【解决方案5】：

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

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

【讨论】：

【解决方案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
    });

【讨论】：