在做项目的时候,需要根据是否上传图片,(前提是已经上传文件,再次上传取消时,监听取消事件)进而判断页面变化。通过查阅相关资料,发现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,所以我们可以借此对取消事件进行监听