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

Question

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

我试过将更改事件绑定(bind)到文档上，它运行得很顺利，但只有一次。第一次上传后，如果我尝试单击文件输入以打开文件选择框，即使我没有搞砸单击事件并且没有使用 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);
});

在文件 uploader 插件中:

(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);

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

Answer 1

因为，在第一次上传后，您将使用以下代码禁用文件按钮

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

删除它，它也会第二次工作