是否可以检测到输入类型文件html (上传文件)上的"cancel“或"close”单击事件？
是否可以检测到输入类型文件html (上传文件)上的"cancel“或"close”单击事件？
提问于 2017-06-20 10:44:57
$('.this_add').click(function(){
$('.add_upload').append('<input type="file" name="file[]">');
$('input[type="file"]:last').click();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<button class="this_add">add</button>
<form action="" method="POST" enctype="multipart/form-data">
<input type="file" name="image[]" />
<div class="add_upload"></div>
<input type="submit"/>
</form>
</body>
</html>
我有一个类似上面的代码片段的场景。如果用户单击add按钮，则会将输入类型文件附加到<div class="add_upload>中，然后触发单击事件；如果用户单击如下图所示的cancel or close，则输入类型文件将被删除。
我想问一下，是否可以用jQuery或Javascript在html格式的输入类型文件上检查“取消或关闭”的单击事件？
回答 2
Stack Overflow用户
发布于 2017-06-20 10:56:19
var file = document.getElementById('file')
file.onclick = charge
function charge()
{
document.body.onfocus = roar
console.log('chargin')
}
function roar()
{
if(file.value.length) alert('ROAR! FILES!')
else alert('*empty wheeze*')
document.body.onfocus = null
console.log('depleted')
}
$(input[type="submit"]).click(function(){
document.getElementById("file").click()
})希望它能帮上忙！
Stack Overflow用户
发布于 2021-09-05 12:59:29
在你的$(‘.this_add’).click(.click(){“你应该设置一个标志(在我的例子中我设置了window.inputFileTrueClosed = true)，这样你就可以检测到窗口在按下该类型事件的"Cancel”按钮后何时获得焦点。下面检测窗口是否再次获得焦点:这意味着"Cancel“按钮可能已经被按下了：
var isChrome = !!window.chrome;
window.addEventListener('focus', function (e) {
if(window.inputFileTrueClosed != false){
if(isChrome == true){
setTimeout(
function()
{
if(window.inputFileTrueClosed != false){
//if it is Chrome we have to wait because file.change(function(){... comes after "the window gets the focus"
window.inputFileTrueClosed = false;
}
}, 1000);
}
else
{
// if it is NOT Chrome (ex.Safari) do something when the "cancel" button is pressed.
window.inputFileTrueClosed = false;
}
}
})显然，该窗口获得了许多其他事件的焦点，但通过该标志，您可以选择需要检测的事件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44642986
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号