输入文件的点击事件第二次不起作用
Click event for input file does not work for 2nd time
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> ("+(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");
删除它,它也将第二次工作
相关文章:
- 更改类名后,将第二次单击事件附加到元素
- Jquery Onclick 事件函数第二次不起作用
- onmouseover事件仅在第二次鼠标悬停后才起作用
- 第二次单击后,jQuery-onclick事件不会更改类
- JavaScript变量在第二次单击事件时间后取消设置
- Jquery点击事件在Ajax之后的第二次点击中传播
- j查询点击事件在第二次点击后不正确
- 隐藏锚标记中的第二次点击事件
- 仅创建第二次点击事件 Javascript
- Ajax onClick 事件第一次获取错误的结果,但第二次获取正确的结果
- JQuery 单击事件在第二次单击时触发,但不在第一次单击时触发
- ReactJS onClick 事件,该事件禁用在 标签上的第二次单击
- IE9 HTML5 视频“播放”事件在第二次播放时未触发
- 使onclick事件在第二次单击时有不同的反应
- 输入文件的点击事件第二次不起作用
- Ember js-文件上传组件-在第二次尝试上传同一文件时强制启动更改事件
- Jquery对事件第二次没有响应
- 委托单击事件仅在第二次单击前进后工作
- 为什么n't事件第二次触发(delegateEvents没有帮助)
- jQuery事件第二次发生