您的位置：首页 > Web前端 > JavaScript

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

2017-06-01 15:51 811 查看

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

预览功能：

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 图片 js 图片预览图片上传

相关文章推荐

新的分享

章节导航