关于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
    <form id="MappeFile">
        <input type="file" id="MappeFileSelect" name="files[]" data-url="ajax/UploadFile.php" multiple/>
       
           
       
        <input type="button" class="neuButton" value="upload" id="testUploadButton"/>
    </form>
    <table id="MappeFileListe"></table>

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

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/