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

最新推荐文章于 2023-04-10 10:59:39 发布

澜漾

最新推荐文章于 2023-04-10 10:59:39 发布

阅读量1k

点赞数

分类专栏： JS使用心得

本文链接：https://blog.csdn.net/weixin_44601948/article/details/106072691

版权

JS使用心得专栏收录该内容

1 篇文章 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>

澜漾

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
取消 input file change监听文件(图片)上传事件多次触发

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.removeE
复制链接

扫一扫

专栏目录