监听 input type=file 文件上传取消事件

最新推荐文章于 2025-04-26 08:42:21 发布

joe0235

最新推荐文章于 2025-04-26 08:42:21 发布

阅读量2.4k

点赞数 1

分类专栏： Js/jQuery 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/joe0235/article/details/130055087

版权

Js/jQuery 专栏收录该内容

15 篇文章

订阅专栏

文章讲述了在JavaScript中如何处理文件上传时监听取消操作的问题。由于change事件无法直接捕获取消行为，作者提出通过检查文件列表长度和利用页面焦点变化来识别用户是否取消了上传。解决方案包括在change事件后清空input.value以及在窗口聚焦时判断上传状态来确定是否取消上传。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做项目的时候，需要根据是否上传图片，（前提是已经上传文件，再次上传取消时，监听取消事件）进而判断页面变化。通过查阅相关资料，发现change事件并不能监听取消，于是从另外一种角度：判断上传的文件是否有值，进而监听取消事件。

代码如下：

<input type="file" name="file" id="fileToUpload" accept="image/*" style="display:none;">

js：

var batchUpload = document.querySelector('#fileToUpload');
     batchUpload.click();
     batchUpload.addEventListener('change', function () {            
          var filesList = document.querySelector('#fileToUpload').files;
          if(filesList.length==0){         //如果取消上传，则改文件的长度为0             
               console.log('取消')
               return;
          }else{  
               //如果有文件上传，这在这里面进行
          }
});

但是上面代码存在问题：

1，如果两次选择打开相同文件，则第二次打开不会执行。

2，若在页面对话框中选择了取消，无法监听或绑定用户取消动作。（就是第一次上传就选择取消，那么代码也不会执行）

这都是 input files 设计带来的问题，因为 input.value 值未改变， onchange 事件不会被触发。

解决问题：

解决第1个问题的思路，大部分浏览器为了安全限制 input.value 值不可修改，但是可以被置空。因此，onchange 文件打开任务完成后，将缓存 input.value 值置空，第二次打开相同的文件之前 input.value 值是空的，onchange 就会被触发。

document.querySelector(‘input’).value = “”; //有效
document.querySelector(‘input’).value = “data.xls”; //无效

解决第2个问题的思路，文件打开对话框弹出后，当前页面失去焦点，当文件选择对话框关闭（无论是确定还是取消），页面将重新获取焦点。可以绑定页面获取焦点事件，判定用户是否取消了文件选择。
需要注意的是，浏览器页面获取焦点事件早于 onchange 事件约20毫秒，需要页面绑定的事件滞后执行，使用 setTimeout 即可。

代码如下：

var FLAG = 0;

//上传图片并判断条件
$('#upload').click(function () {
  FLAG = 1;
  $("#uploading").text('上传中...')
})

$("#fileToUpload").change(function (e) {
  var fileTypes = [".jpg", ".png"];
      var filePath = fileToUpload.value;
      console.log(filePath)
      if(filePath){
          FLAG = 2;
          ......
          $("#uploading").text('上传成功');
      }
})

// 取消上传
$(window).focus(f => {
    setTimeout(e => {
        if (FLAG == 1) {
            FLAG = 0;
            console.log('取消');
            $("#uploading").text(' ')
        }
    }, 100);
});

至此，两个问题完美解决。