11

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>
4

2 に答える 2

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")
            })
        },
于 2012-11-09T13:31:01.130 に答える