Question

我正在使用Blueimp jQuery File Upload并且它正常工作，但我在取消上传其中一个文件方面遇到了问题。

当我添加一个文件时，我附加了一个带有一些额外输入和一个按钮的html字段集 - ＆＃34;取消＆＃34;。我需要的是这样的事情：

$(".cancelUpload").on("click", function(){
      //remove this file from the queue, The data and the file will not be uploaded
})

这是我的代码的一部分

$('#MappeFile').fileupload({
        dataType : 'json',
        autoUpload : false,
        maxNumberOfFiles : undefined,
        maxFileSize : 2000,
        minFileSize : undefined,
        acceptFileTypes : /.+$/i,
        url : "/ajax/UploadFile.php",
        add : function(e, data) {
            $("#fileUploadButton").removeClass("toHide").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.formData=$("form").serializeArray();
                data.submit();
                $("#fileUploadButton").off("click").addClass("toHide")

            })
        },
        change : function(e, data) {
            $.each(data.files, function(index, file) {

                filesCount++;
                vOutput = "<fieldset class='FileUploadFieldset'>"
                vOutput += "<legend>" + file.name + "</legend>"
                vOutput += "<label>Dateiname:</label><input type='text' value='"+file.name+"' name='Dateiname"+filesCount+"' size='50' class='UploadDateiName inputMaske'/><input type='text' class='toHide originName' name='originName"+filesCount+"' value='"+file.name+"'/>"
                vOutput += "<label>Dokumentdatum</label><input type='text' name='Datum"+filesCount+"' class='UploadDatum inputMaske'>"
                vOutput += "<label>Berater:</label><select name='Berater"+filesCount+"' class='UploadBeraterSelect inputMaske'></select>"
                vOutput += "<fieldset><legend>Kategorie:</legend><div class='UploadKategorie'></div></fieldset>"
                vOutput += "<fieldset><legend>Bemerkung:</legend><textarea name='Bemerkung"+filesCount+"' class='UploadBemerkung inputMaske'></textarea></fieldset>"
                vOutput += "<input type='button' class='cancelUpload neuButton' value='cancel'/>"
                vOutput += "</fieldset>"
                $("#MappeFilesToUpload").append(vOutput);   
            });
        }
    });

Answer 1

如果你使用fileupload-ui.js，你只需要添加一个“取消”类，它将自动绑定到cancelHandler。

尝试更新此行：

 vOutput += "<input type='button' class='cancelUpload neuButton' value='cancel'/>"

为：

    vOutput += '<div class="cancel"> <button> cancel </button> </div>'

如果您只使用核心插件，请查看此行以了解您需要执行的操作。

来自fileupload-ui.js：

   _initEventHandlers: function () {
        this._super();
        this._on(this.options.filesContainer, {
            'click .start button': this._startHandler,
            'click .cancel button': this._cancelHandler,
            'click .delete button': this._deleteHandler
        });
        this._initButtonBarEventHandlers();
    },

    .
    .
    .

    _cancelHandler: function (e) {
        e.preventDefault();
        var template = $(e.currentTarget).closest('.template-upload'),
            data = template.data('data') || {};
        if (!data.jqXHR) {
            data.errorThrown = 'abort';
            this._trigger('fail', e, data);
        } else {
            data.jqXHR.abort();
        }
    },

如何使用Blueimp jQuery File Upload取消上传单个文件

1 个答案: