实现图片上传预览和取消文件上传功能

问题由来：自己开发的一个预约系统要实现上传图片预览，自己费了九牛二虎之力，加上查资料才实现功能。下面我的实现思路。

预览功能：

1.<input id="files" type="file" onchange="preview();"/>首先需要定义一个事件，这个文件选择框发生改变，就触发这个方法,我这里叫preview.

2.preview方法里面需要怎样写，首先需要获得this file 的路径也就是url。

3.然后将url赋值给img 的src属性。

取消上传功能

1.定义一个按钮，添加一个单击时间对应函数为call();

2.函数里面先将img的src属性设置为空串。

3.将input 的value属性设置为空串。

下面代码实现：

<!DOCTYPE html>
<html>


	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//实现预览功能
			function preview() {
				//获取文件框的第一个文件,因为文件有可能上传多个文件,咱这里是一个文件
				var file = document.getElementById("fileload").files[0];
				//可以进行一下文件类型的判断
				var fileType = file.type.split("/")[0];
				if(fileType != "image") {
					alert("请上传图片")
					return;
				}
				//图片大小的限制
				var fileSize = Math.round(file.size / 1024 / 1024);
				if(fileSize >= 3) {
					alert("请上传小于少于3M的图片");
					return;
				}
				//获取img对象
				var img = document.getElementById("image");
				//建一条文件流来读取图片
				var reader = new FileReader();
				//根据url将文件添加的流中
				reader.readAsDataURL(file);
				//实现onload接口
				reader.onload = function(e) {
					//获取文件在流中url
					url = reader.result;
					//将url赋值给img的src属性
					img.src = url;
				};


			}
			//实现取消上传功能
			function call() {
				//将img的src属性赋值为空串
				document.getElementById("image").src = "";
				//选择文件框的value属性赋值为空串
				document.getElementById("fileload").value = "";
			}

		</script>
	</head>


	<body>
		<input id="fileload" type="file" onchange="preview();" />
		<!--建一个文件选择框-->
		<input type="button" value="取消" onclick="call();" />
		<h2>预览</h2>
		<div style="width: 400px;height: 400px;border: 1px solid #303030;">
			<!--设置一个框放图片-->
			<img id="image" width="100%" height="100%" src="" />
			<!--放图片的标签-->
		</div>
	</body>


</html>

实现效果：

选择前：

选择后：

取消后：

前面还遗留一个问题，我的取消上传代码是这样：

function call() {
//将img的src属性赋值为空串
document.getElementById("image").src ="";
//选择文件框的value属性赋值为空串
document.getElementById("fileload").value ="";
}

问题就是我把这些属性都赋值为空串，如果都赋值为null会怎样：

function call() {
//将img的src属性赋值为空串
document.getElementById("image").src =null;
//选择文件框的value属性赋值为空串
document.getElementById("fileload").value =null;
}

上图：

结果会发现img会多个图标而文件框无改变，我是这么理解这个问题，第一种情况空串，我可以认为这个对象是存在的，只不过他没有值，而第二种情况是，这个对象根本不存在，所以会提示加载不到图片，向有时网络延迟就会出现这种情况。

实现图片上传预览和取消文件上传功能

猜你喜欢