取消 input file change监听文件(图片)上传事件多次触发

桃扇骨 2021-07-24 23:32 628阅读 0赞

JQ用unbind  
原生用removeEventListener

$("#box>.inner").onclick =function(){ 
    			function watch(){ 
    				for(let i=0,file;file=this.files[i++];){ 
    					let fileObj = uploadManger.add(upload_id,file.type,file.name,file.size)
    					upload_id++
    				}
    				this.removeEventListener('change',watch)
    			}
    			this.addEventListener('change',watch)
    		}

全部代码：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style> span{ height: 40px; line-height: 40px; } .fileList{ background-color: #61e6f6; /* box-shadow: 1px 2px #fff; */ } </style>
    	</head>
    	<body>
    		<div id="box">
    			<input class="inner" type="file" multiple='multiple' value="点击选择上传文件"/>
    		</div>
    	</body>
    	<script> let $ = (type)=>document.querySelector(type) let lg = (type)=>console.log(type) var upload_id = 1 ; let upload = function(uploadType,fileName,fileSize){ this.uploadType = uploadType; } let uploadFactory = (function(){ let createFlyWeightObj= { }; return { creare(uploadType){ if(createFlyWeightObj[uploadType]){ return createFlyWeightObj[uploadType] }else{ return createFlyWeightObj[uploadType] = new upload(uploadType) } } } })() let uploadManger = (function(){ let uploadArr = { }; return { add(id,uploadType,fileName,fileSize){ let FlyWeightObj = uploadFactory.creare(uploadType) let dom=document.createElement("div"); dom.classList.add('fileList') dom.innerHTML = ` <span>队列ID：${ id}</span> <span>文件类型：${ FlyWeightObj.uploadType}</span> <span>文件名称：${ fileName}</span> <span>文件大小：${ fileSize}</span> <input class='onPause' type="button" value="暂停上传"/> <input class='onDetele' type="button" value="删除上传"/> `; document.body.appendChild(dom) dom.querySelector('.onDetele').onclick = function(){ uploadArr[id].dom.remove() delete uploadArr[id] return } dom.querySelector('.onPause').onclick = function(){ } uploadArr[id] = { id, uploadType:FlyWeightObj.uploadType, fileName, fileSize, dom:dom } } } })() $("#box>.inner").onclick =function(){ function watch(){ for(let i=0,file;file=this.files[i++];){ let fileObj = uploadManger.add(upload_id,file.type,file.name,file.size) upload_id++ } this.removeEventListener('change',watch) } this.addEventListener('change',watch) } </script>
    </html>