Question

您好我有一个包含文件输入元素的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隐藏，导致禁用它。

Answer 1

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

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

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

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

1 个答案: