我正在使用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>
答案 0 :(得分:20)
我自己找到了答案 - 上传后取消绑定按钮的点击事件就足够了:
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")
})
},
答案 1 :(得分: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上的完整示例