blueimp插件会在每次后续上传时上传多个文件

Question

我正在尝试使用blueimp控件仅上传单个文件（就像普通的HTML文件上传一样）。但是，在文件上传完成后，我选择了一个不同的文件，再次使用新文件上传以前的文件。 随后，在我选择文件后，每次都会上传多个文件（以前选择过的文件）。

屏幕截图来说明：

如何解决这个问题？

这是我的javascript初始化代码：

$().ready(function(){

$('#fileupload').fileupload({
    dataType: 'json',
    maxChunkSize:0,
    singleFileUploads: true,
    autoUpload:false,
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        //console.log();
        $('#progress .bar').css(
            'width',
            progress + '%'
        );
    },
    add: function (e, data) {
        $("#start-sql-upload").on('click', function () {
            data.submit();
        });
    }
});

}）;

和我的上传表单：

<form>
    <input id="fileupload" type="file" name="files" data-url="http://localhost/database/upload">

    <button type="button" class="btn btn-info btn-sm" id="start-sql-upload">Upload File</button>
</form>

请帮忙。

Answer 1

我遇到了同样的问题，我非常肯定设置maxNumberOfFiles选项解决了这个问题。如：

maxNumberOfFiles：1

使用您的代码：

$('#fileupload').fileupload({
dataType: 'json',
maxChunkSize:0,
singleFileUploads: true,
autoUpload:false,
maxNumberOfFiles: 1,
progressall: function (e, data) {
    var progress = parseInt(data.loaded / data.total * 100, 10);
    //console.log();
    $('#progress .bar').css(
        'width',
        progress + '%'
    );
},
add: function (e, data) {
    $("#start-sql-upload").on('click', function () {
        data.submit();
    });
}

}）;

Answer 2

删除maxChunkSize：0，

此属性用于分割传递的参数的文件大小。

Answer 3

这应该解决它：

add: function (e, data) {
    $("#start-sql-upload").off('click').on('click', function () {
        data.submit();
    });
}