在网上看到很多的图片上传后就可以预览的效果，今天找个空来试一下，虽然有点小BUG，先记下了
页面标签
图片上传需要用到<input type="file"....>这个文件上传组件，参照了网上的一些思路，在外层套一个标签，里面再放一个图片标签，组合后就成了下面这种结构
<div class="img-item">
<img src="picture.png"/>
<input type="file" accept="image/jpg,image/jpeg,image/png">
</div>
放了一个占位图片picture.png，用于显示未上传前的效果。并限定文件类型只能上传图片格式
样式调整
修改标签样式，让图片居中显示，隐藏掉input
.img-item{
width: 180px;
height: 300px;
line-height: 300px;
float: left;
border: 1px solid LightGrey;
text-align: center;
cursor: pointer;
}
.img-item>img{
max-width: 180px; /*设置图片的最大显示宽度不超过限定值*/
max-height: 300px; /*设置图片的最大显示高度*/
}
.img-item>input{
display: none; /*隐藏file控件*/
}
处理事件
隐藏掉input后，需要激活文件上传操作，设定点击div时激活文件控件的单击，将代码做了下面的调整
<div class="img-item" onClick="clickImgItem(this)">
<img src="picture.png"/>
<input type="file" accept="image/jpg,image/jpeg,image/png">
</div>
对应的js方法如下
function clickImgItem(obj){
//模拟文件控件的单击，激活文件上传功能
obj.children[1].click();
}
在选中图片后，需要将图片加载到img标签中，需要处理input中的数据改变事件，添加一个方法showPic()
<input type="file" onchange="showPic(this)" accept="image/jpg,image/jpeg,image/png">
添加js方法如下
function showPic(picfile) {
//通过picfile对象获取img对象
let img = picfile.parentNode.firstElementChild;
let reads = new FileReader();
if(picfile.files.length>0){
reads.readAsDataURL(picfile.files[0]);
reads.onload = function(e) {
//修改图片的src为选定的文件
img.src = this.result;
};
}
}
添加length>0是为了处理用户在没有选择图片就退出的情况，也可以使用picfile.files[0]!=null来进行判断。
最终代码及效果
demo代码
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片上传预览</title>
<style>
.img-item{
width: 180px;
height: 300px;
line-height: 300px;
float: left;
border: 1px solid LightGrey;
text-align: center;
cursor: pointer;
}
.img-item>img{
max-width: 180px;
max-height: 300px;
}
.img-item>input{
display: none; /*隐藏file控件*/
}
</style>
</head>
<body>
<h3>图片上传</h3>
<div class="img-item" onClick="clickImgItem(this)">
<img src="picture.png"/>
<input type="file" onchange="showPic(this)" accept="image/jpg,image/jpeg,image/png">
</div>
<script>
function clickImgItem(obj){
//模拟文件控件的单击，激活文件上传功能
obj.children[1].click();
}
function showPic(picfile) {
//通过picfile对象获取img对象
let img = picfile.parentNode.firstElementChild;
let reads = new FileReader();
if(picfile.files.length>0){
reads.readAsDataURL(picfile.files[0]);
reads.onload = function(e) {
//修改图片的src为选定的文件
img.src = this.result;
};
}
}
</script>
</body>
</html>
未选择图片
已选择上传图片
小结
基本的效果已实现，还有需要改进的一些功能
选择图片后，仅限定了最大显示尺寸，为了不超出区域，如果图片与控件比例不一致，会出现留白
在处理居中的时候用了一个行高，处理起来简单，但最后的效果有点偏上，没再继续折腾这个BUG了，有知道这个问题的小伙伴欢迎留言
