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

时间:2022-04-21 12:23:17

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

预览功能:

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