输入文件的点击事件第二次不起作用

Click event for input file does not work for 2nd time

本文关键字:事件 第二次 不起作用 文件 输入      更新时间:2023-09-26

Hi我有一个ajax加载的表单,其中包含一个文件输入元素。应用程序应该能够在输入时检测到更改事件,并将所选文件上传到服务器。

我已经尝试将更改事件绑定到文档上,它运行顺利,但只有一次。在第一次上传之后,如果我试图点击文件输入打开文件选择框,我没有得到任何响应,尽管我没有处理点击事件,也没有用ajax加载任何额外的内容。

我的代码如下

加载的HTML表单:

<form>
  .
  .
  .
      <div class="custom-file-upload" data-url="uploader.php">
            <input class="file-upload-input" placeholder="pdf / doc / ppt / zip" disabled />
            <div class="file-upload button">
                 <span>Upload</span>
                 <input id="input-file" type="file" class="upload" />
            </div>
      </div>
  .
  .
  .
</form>

更改事件侦听器:

$(document).on("change","#input-file",function(event){
        $(this).fileUploader(event);
});

在文件上传器插件中:

(function($){
        var variables = {
            input : null,
            father : null,
            file : null,
            uploading : false
        };
        var methods = {
            proccess : function(event){
                if(!event.target.files){
                    return false;
                }
                variables.uploading=true;
                variables.file=event.target.files[0];
                variables.father.closest("form").attr("data-disabled","true");
                variables.father.showLoading("buttonR");
                variables.father.find(".file-upload-input").val(variables.file.name);
                methods.upload(event);
            },
            upload : function(event){
                var data= new FormData();
                data.append("file",variables.file);
                $.ajax({
                    url: variables.father.attr("data-url"),
                    type: 'POST',
                    data: data,
                    cache: false,
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function(data, textStatus, jqXHR){ 
                        variables.input.hideLoading("buttonR");
                        variables.father.closest("form").attr("data-disabled","false");
                        variables.uploading=false;
                        variables.father.find(".file-upload-input").val("");
                        if(data.success){
                            methods.populate(data);
                        }
                        else{
                            $("body").textAlert(data.message,false,"notice");
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown){ 
                        variables.input.hideLoading("buttonR");
                        variables.father.closest("form").attr("data-disabled","false");
                        variables.father.hideLoading("buttonR");
                        variables.uploading=false;
                        variables.father.find(".file-upload-input").val("");
                        variables.input.hideLoading("buttonR"); 
                        $("body").textAlert("An error occured while trying to access server",false,"error");
                    }
                });
            },
            populate : function(data){
                variables.father.closest("form").find("input[name=filePath]").prop("value",data.file);
                if(variables.father.closest("form").find("#tmp-popup-elem")){
                    $("#tmp-popup-elem").remove();
                }
                $("<div id='"tmp-popup-elem'" class='"br35 right'">'n'
                    <h3><i class='"fa fa-check green'"></i> <strong>"+variables.file.name+"</strong>&nbsp;&nbsp;("+(Math.ceil(variables.file.size/1024))+" KB)</h3>'n'
                    </div>").insertAfter(variables.father);
            }
        };
    $.fn.fileUploader = function(event){
            variables.father=$(this).parent().parent();
            variables.input=$(this);
            if(!variables.uploading){
                methods.proccess(event);
            }
            return $(this);
    };
})(jQuery);

编辑(已解决):问题是错误使用showLoading。我在variables.father中使用了它,但我试图向variables.input隐藏它,导致禁用它。

因为,在第一次上传后,您将禁用带有以下代码的文件按钮

variables.input.attr("disabled","disabled");

删除它,它也将第二次工作