我有一个通用的输入文件。当您按下它时,它会打开相应的窗口以从您的计算机中选择一个文件。
当您单击输入按钮时,我有一个功能可以加载“加载” gif;and when selecting the image and processing the sending of the image by ajax to the server this gif is hidden.
但是,如果用户在没有选择文件的情况下点击“取消”或关闭窗口,我该如何隐藏 gif?
gif 在选择和处理输入文件时会隐藏它,因为会触发 onchange 事件。
我该怎么做?
<input type="file" id="file"/>
JS:
$("#file").on("click", function(){
$(".gif").show();
});
$("#file").on("change", function(){
$.ajax({
...,
complete(){
$(".gif").hide();
}
});
});
我可以想到两种方法:
1.您可以在模态窗口的关闭按钮上添加一个事件,这样您就可以隐藏您的gif(最好的选择)。
2.创建一个函数,每 X 次询问模态是否可见。如果不是,那么你隐藏 gif:
这是一种对我有用的方法;这是@Einer 仅提到生成输入的窗口的选项之一
file
https://jsfiddle.net/cromerog/1b3seqrw/7/
所做的是验证窗口是否有焦点;如果它失去焦点(取消、按下
ESC
或选择一个文件),它会发送隐藏gif
.它将
<span id="status">
模拟gif
.举个例子:
https ://forum.imasters.com.br/topic/556543-evento-ao-cancelar-input-file-com-jquery/?do=findComment&comment=2220313
您的代码中的错误是
gif
无论是否执行操作都会显示,更不用说仅在用户单击输入时才显示gif,如果用户使用“tab”键将无法显示访问它。输入。解决方法很简单
有趣的
onchange
是,它仅在输入的值发生变化时调用,如果用户点击取消,则该值保持不变,并且事件不被执行onchange
。这是我实现过的最好的,因为当用户关闭窗口(通过任何方法)并且用户没有选择要上传的文件时,浏览器不会告诉 JS:
这里的例子