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