问题由来：自己开发的一个预约系统要实现上传图片预览，自己费了九牛二虎之力，加上查资料才实现功能。下面我的实现思路。
预览功能：
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会多个图标而文件框无改变，我是这么理解这个问题，第一种情况空串，我可以认为这个对象是存在的，只不过他没有值，而第二种情况是，这个对象根本不存在，所以会提示加载不到图片，向有时网络延迟就会出现这种情况。