关于javascript：如何使用blueimp文件上传插件只上传一次文件？

How to upload a file only once with blueimp file upload plugin?

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

Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

$(‘#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:

1
2
3
4
5
6
7
8

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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
3

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

下面的完整示例：

1
2
3
4
5
6
7
8
9

$(‘#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/

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/268783.html

关于javascript：如何使用blueimp文件上传插件只上传一次文件？

How to upload a file only once with blueimp file upload plugin?

相关推荐

发表回复