js原生上传文件二次选择点击取消之后，文件被清空的问题

最新推荐文章于 2024-07-24 00:06:32 发布

oduoke~~

最新推荐文章于 2024-07-24 00:06:32 发布

阅读量1.8k

点赞数 1

本文链接：https://blog.csdn.net/xh1506101064/article/details/122238855

版权

目的

上传文件时，当我们第一次选择文件点击确定之后，第二次选择文件点击取消之后，文件会自动被清掉，我们第一次选择的文件就不存在了，但我们想实现第二次选择文件时，点击取消，第一次选择的文件不会被清空。

这边想从onchange事件里面去改感觉是不可能的了。

尝试将整个对象clone出来。

当用户选择了文件之后，将该对象克隆出来，保存，如果用户再次点击选择文件并取消时，判断文件名是否为空，如果是空就将之前克隆的文件替换掉目前空的内容。大致就是这么一个思路。

还要一个问题，因为上传事件用的是onchange。所以当我们第二次或者第三次选择文件之后点击取消，是不会触发onchange事件的。这个元素我想的是，元素相同那么肯定是不会触发onchange事件的,如果我们将克隆的对象替换掉当前对象这个操作之后，再将clone对象重新clone一次，那么用户下一个点击取消之后，我这边将这个二次clone的对象再次替换之后是不是就不是同一个onchange事件了呢。说的比较复杂我这边画个图解释一下。

在这里插入图片描述

上完整代码，记得引入./jquery.js，可以之间使用。这里使用的是jq的clone，克隆的对象。不用jq的话，可以使用其他的，能克隆就行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<script type="text/javascript" src="./jquery.js"></script>
	<body>
		<div id="">
			<form>
			    <input type="file" id="file-input" name="fileContent">
			 </form>
		</div>
	</body>
	<script>
		var cloneFile = {file:{}}
		var fileInput = document.querySelector('#file-input');
		// fileInput.onchange = changeFun();
		$('#file-input').bind("change",changeFun)
		function changeFun(e){
			//兼容e事件
			e = e || window.event
			var fileElement = e.target
			var fileName = getFileName(fileElement.value)
			// 当文件名为0时，代表用户选择文件之后点击了取消
			if(fileName.length==0){
				//TODO:将克隆的文件替换当前空文件
				console.log(1);
				console.log(cloneFile.file);
				cloneFile.file.insertBefore(fileElement)
				$(fileElement).remove()
				//替换之后再将次克隆保存，不然第三次点击取消就会报错
				cloneFile.file = $(cloneFile.file).clone(true,true)
				return
			}else{
				 // 当文件名不为0时，将该对象克隆之后保存到cloneFile里面
				cloneFile.file = $(fileElement).clone(true,true)
			}
			var filereader = new FileReader();
			// 将文件对象克隆给cloneFile
			
			// cloneFile.file = $(fileElement).detach()
			var fileType = this.files[0].type;
			filereader.onload = function(){
				if(/^image\[jpeg|png|gif]/.test(fileType)){
					console.log(this.result);
				}
			}
			// console.log(this.files[0]);
			filereader.readAsDataURL(this.files[0]);
		}
		// 读取文件名
		function getFileName(path){
			var idx = path.lastIndexOf("\\")
			if(idx == -1){
				idx = path.lastIndexOf("/")
			}
			return path.substring(idx+1)
		}
		// console.dir(fileInput);
	</script>
</html>