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

在项目中,需根据图片上传情况判断页面变化,尤其要监听已上传文件再次上传取消的事件。发现change事件无法监听取消,于是从判断上传文件是否有值的角度,通过文件长度是否大于0来监听取消事件。

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

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

<input type="file" id="batchUpload"
 name="files" 
 accept="image/jpg, image/gif,image/png, image/jpeg" 
 multiple="multiple">
	var batchUpload = document.querySelector('#batchUpload');
	 batchUpload.click();
	 batchUpload.addEventListener('change', function () {            
                   var filesList = document.querySelector('#batchUpload').files;
                   if(filesList.length==0){         //如果取消上传,则改文件的长度为0         
                       return;
                   }else{  
                   	//如果有文件上传,这在这里面进行
                   }
                }); 
 

通过上述代码可以发现,当我们上传文件时,如果取消上传,document.querySelector('#batchUpload').files.length==0,反之如果有文件上传,则其上传的文件长度会大于0,所以我们可以借此对取消事件进行监听

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值