如何只用blueimp文件上传插件上传文件一次？ [英] How to upload a file only once with blueimp file upload plugin?

问题描述

我正在使用 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。版本10）< 10）{
 $（'＃progress.bar'）.css（{
background：url（images / progressbar.gif）no-repeat，
width：100％
}）
} else {
 $（'＃progress .bar'）。css（{
'b ackground-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 =fileid =MappeFileSelectname =files []data-url =ajax / UploadFile.phpmultiple /> 
< div id =progress> 
< div class =barstyle =width：0％;>< / div> 
< / div> 
< input type =buttonclass =neuButtonvalue =uploadid =testUploadButton/> 
< / form> 
< table id =MappeFileListe>< / table> 
< / div> 
  

解决方案

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

pre code add：function（e，data）{
$（＃testUploadButton ）.on（click，function（）{
$（'＃progress .bar'）。show（）; $ b $ 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）
}）
}，

I'm using the bluimp jQuery-File-Upload-plugin . It's no problem to select some files and upload them, but when I want to upload another files without refreshing the page, the first ones are getting uploaded again. My question is how can I "unset" files after they are uploaded. Here is my sourcecode

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>

解决方案

I found the answer myself - It's enough to unbind the click event of the button after upload:

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

这篇关于如何只用blueimp文件上传插件上传文件一次？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！