Javascript 如何使用blueimp文件上载插件只上载一次文件？

我在用电话。选择一些文件并上传它们没有问题，但是当我想上传另一个文件而不刷新页面时，第一个文件会被再次上传。我的问题是如何在上传文件后“取消设置”它们。这是我的源代码

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 + '%');
        }
    });

$（'#MappeFile'）.fileupload({
数据类型：“json”，
自动上载：false，
maxNumberOfFiles:未定义，
最大文件大小：6000000，
minFileSize:未定义，
AcceptFileType:/.+$/i，
url:“/ajax/UploadFile.php”，
添加：功能（e、数据）{
$（#testUploadButton”）。在（“单击”，函数（）上{
$（'#progress.bar'）.show（）；
if（$.browser.msie&&parseInt（$.browser.version，10）<10）{
$（'#progress.bar'）.css({
“背景”：“url（images/progressbar.gif）不重复”，
“宽度”：“100%”
})
}否则{
$（'#progress.bar'）.css({
“背景色”：“2694E8”，
“宽度”：“0%”
});
}
data.submit（）；
})
},
更改：功能（e、数据）{
$.each（data.files，函数（索引，文件）{
console.info（'所选文件：'+文件名）；
filescout++；
});
},
下降：功能（e，数据）{
$.each（data.files，函数（索引，文件）{
console.info（'所选文件：'+文件名）；
filescout++；
});
},
完成：功能（e，数据）{
$.each（data.result、函数（索引、文件）{
vOutput=“”；
vOutput+=“”+文件+“”；
vOutput+=“”；
$（“#MappeFileListe”）.append（vOutput）；
文件上传++；
if（filescont==filesuppload）{
文件上载=0；
文件计数=0；
$（'#progress.bar'）.hide（）；
}
});
},
progressall：功能（e、数据）{
var progress=parseInt（data.loaded/data.total*100,10）；
$（'#progress.bar'）.css（'width'，progress+'%'）；
}
});

HTML:

---

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

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")
            })
        },

add:函数（e，数据）{
$（#testUploadButton”）。在（“单击”，函数（）上{
$（'#progress.bar'）.show（）；
if（$.browser.msie&&parseInt（$.browser.version，10）<10）{
$（'#progress.bar'）.css({
“背景”：“url（images/progressbar.gif）不重复”，
“宽度”：“100%”
})
}否则{
$（'#progress.bar'）.css({
“背景色”：“2694E8”，
“宽度”：“0%”
});
}
data.submit（）；
$（“#testUploadButton”）。关闭（“单击”）
})
},

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

在Add函数中，只需添加文件输入元素的“change”事件，如下所示：

$('#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').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
 });

注意：只需将您的文件上传元素id更改为您的文件上传元素id即可

下面是jsfiddle.net上的完整示例

---

我也有同样的问题。但对于您的解决方案，它只是抑制所有其他请求，仍然分配内存。如何限制文件数量，以避免将所选文件添加到上载队列？设置

maxNumberOfFiles:1

对我不起作用。在新的

$（“#testUploadButton”）之前设置
$（“#testUploadButton”）。关闭（“单击”）
。打开（“单击”，函数（）{…}

？您的解决方案似乎不是正确的答案，但它帮了我的忙，非常感谢。发生多个文件上载的原因是每次fileupload（）都会发生被称为的testUploadButton中添加了一个新的click事件。如此答案所示，从按钮中删除click事件可以解决此问题。有一个jquery函数one（）将click事件绑定到按钮，然后在第一次调用后解除click的绑定。这将导致以下更改：$(“#testUploadButton”）.one（“单击”，function（）{很好的解决方案。我将它放在我的单击处理程序之前，以便只上载最近选择的文件。