如何使用 blueimp 文件上传插件只上传一次文件？答案

【问题标题】：How to upload a file only once with blueimp file upload plugin?如何使用 blueimp 文件上传插件只上传一次文件？
【发布时间】：2012-10-29 13:58:02
【问题描述】：

我正在使用 bluimp jQuery-File-Upload-plugin 。选择一些文件并上传它们是没有问题的，但是当我想在不刷新页面的情况下上传另一个文件时，第一个文件又被上传了。我的问题是如何在上传文件后“取消设置”文件。这是我的源代码

Javascript：

$('#MappeFile').fileupload({
        dataType : 'json',
        autoUpload : false,
        maxNumberOfFiles : undefined,
        maxFileSize : 6000000,
        minFileSize : undefined,
        acceptFileTypes : /.+$/i,
        url : "/ajax/UploadFile.php",
        add : function(e, data) {
            $("#testUploadButton").on("click", function() {
                    $('#progress .bar').show();
                    if ($.browser.msie && parseInt($.browser.version, 10) < 10) {
                        $('#progress .bar').css({
                            "background" : "url(images/progressbar.gif) no-repeat",
                            "width" : "100%"
                        })
                    } else {
                        $('#progress .bar').css({
                            'background-color' : "#2694E8",
                            'width' : '0%'
                        });
                    }
                data.submit();
            })
        },
        change : function(e, data) {
            $.each(data.files, function(index, file) {
                console.info('Selected file: ' + file.name);
                filesCount++;
            });
        },
        drop: function(e, data) {
            $.each(data.files, function(index, file) {
                console.info('Selected file: ' + file.name);
                filesCount++;
            });
        },
        done : function(e, data) {
            $.each(data.result, function(index, file) {
                vOutput = "<tr>";
                vOutput += "<td>" + file + "</td>";
                vOutput += "<tr>";
                $("#MappeFileListe").append(vOutput);
                filesUploaded++;
                if (filesCount == filesUploaded) {
                    filesUploaded = 0;
                    filesCount=0;
                    $('#progress .bar').hide();
                }
            });
        },
        progressall : function(e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css('width', progress + '%');
        }
    });

HTML：

<div id="KundeMappe">
    <form id="MappeFile">
        <input type="file" id="MappeFileSelect" name="files[]" data-url="ajax/UploadFile.php" multiple/>
        <div id="progress">
            <div class="bar" style="width: 0%;"></div>
        </div>
        <input type="button" class="neuButton" value="upload" id="testUploadButton"/>
    </form>
    <table id="MappeFileListe"></table>
</div>

【问题讨论】：

标签： javascript jquery file-upload blueimp

【解决方案1】：

我自己找到了答案——上传后解绑按钮的点击事件就够了：

add : function(e, data) {
            $("#testUploadButton").on("click", function() {
                    $('#progress .bar').show();
                    if ($.browser.msie && parseInt($.browser.version, 10) < 10) {
                        $('#progress .bar').css({
                            "background" : "url(images/progressbar.gif) no-repeat",
                            "width" : "100%"
                        })
                    } else {
                        $('#progress .bar').css({
                            'background-color' : "#2694E8",
                            'width' : '0%'
                        });
                    }
                data.submit();
                $("#testUploadButton").off("click")
            })
        },

【讨论】：

我也有同样的问题。但是使用您的解决方案，它只会抑制所有其他请求，仍然分配内存。如何限制文件数量，避免将选中的文件加入上传队列？设置 maxNumberOfFiles: 1 对我不起作用。
在新的$("#testUploadButton").on("click", function() { ... } 之前设置$("#testUploadButton").off("click") 是否更好？
您的解决方案似乎不是正确的答案，但非常感谢。
之所以会发生多个文件上传，是因为每次调用 fileupload() 时都会向 testUploadButton 添加一个新的点击事件。正如这个答案所示，从按钮中删除点击事件可以解决这个问题。有一个 jquery 函数 one() 它将单击事件绑定到按钮，然后在第一次调用后取消绑定单击。 api.jquery.com/one 这将导致以下更改： $("#testUploadButton").one("click", function() {
很好的解决方案。我把它放在我的点击处理程序之前，以便只上传最近选择的文件。

【解决方案2】：

我有一个类似的问题，以前上传的文件包含在下一次上传中。您可以尝试以下解决方案：

在添加功能时，只需添加文件输入元素的“更改”事件，如下所示：

$('#YourFileUploadElementId').change(function(e) {
     data.files.splice(0); // Clear All Existing Files
});

完整示例如下：

$('#YourFileUploadElementId').fileupload({
    // Some options
    add: function (e, data) {
        $('#YourFileUploadElementId').change(function(e) {
          data.files.splice(0); // Clear All Existing Files
        });
    },
    // Other Events
 });

注意：只需将 YourFileUploadElementId 更改为您的文件上传元素 ID。

这是 jsfiddle.net 上的完整示例

http://jsfiddle.net/dustapplication/cjodz2ma/5/

【讨论】：