前端入坑纪 11
最近这几天一直在折腾这个在线预览图片的功能，关键是项目要求可以由用户创建多个上传图片的按钮，每个按钮代表一个上传控件。可能是我想复杂了，或者本身功力不到家。总之，做得自己都快呕血了。
俗话说，功夫不负有心人。最终还是搞出来了，现在单单精简一个，来给大家展示下效果。说真的，单单做一个，还TM简单啊！真是没有对比没有伤害～
截图
OK，first things first！项目链接
HTML 结构
<div class="imgView">
<a href="javascript:;">chang</a>
<a href="javascript:;">close</a>
<img src="" alt="">
</div>
<!--由于这里的input会被重新创建，所以事件要写在里面才会有效-->
<lable class="upBtn">
添加图片
<input type="file" accept="image/*" onchange="imgChange()" hidden="hidden" />
</lable>
网页结构简单来说，一个是用来预览图片的imgView，一个是点击用的按钮upBtn，两个a包含在预览里面的功能按钮。
Css 结构
.imgView {
display: none;
border: 1px dashed #ccc;
border-radius: 5px;
min-height: 50px;
position: releative:
}
.imgView>img {
width: 100%;
}
.imgView>a {
text-decoration: none;
color: #333;
background: #ccc;
display: block;
line-height: 35px;
position: absolute;
top: 15px;
right: 15px;
text-align: center;
font-size: 10px;
border-radius: 50%;
width: 35px;
height: 35px;
font-size-adjust: none;
}
.imgView>a:first-child {
right: 66px;
}
.upBtn {
display: block;
width: 100%;
height: 38px;
line-height: 38px;
border-radius: 5px;
border: 1px solid #ccc;
text-align: center;
color: #666;
outline: none;
}
样式就是简单的美化了下界面，没什么特殊的效果
Javascript 结构
var oimgView = document.getElementsByClassName("imgView")[0];
var oimg = oimgView.getElementsByTagName("img")[0];
var ochang = oimgView.getElementsByTagName("a")[0];
var oclose = oimgView.getElementsByTagName("a")[1];
var lables = document.getElementsByClassName("upBtn")[0];
function imgChange() {
var oinpt = document.getElementsByTagName("input")[0];
var freader = new FileReader();
var ofile = oinpt.files[0];
// 存在文件时，执行这里的if
if (oinpt.files[0]) {
console.log(ofile.name);
// 以dataURL读取图片，当完成时变更图片地址，并显示
freader.readAsDataURL(ofile);
freader.onload = function() {
oimg.src = this.result;
oimgView.style.display = "block";
lables.style.display = "none";
}
}
// 选择时取消，或没有读到文件时，变更图片地址为空，并隐藏
else {
oimg.src = "";
oimgView.style.display = "none";
lables.style.display = "block";
}
}
lables.onclick = function() {
var oinpt = document.getElementsByTagName("input")[0];
oinpt.click();
}
ochang.onclick = function() {
var oinpt = document.getElementsByTagName("input")[0];
// 模拟点击事件
oinpt.click();
}
oclose.onclick = function() {
oimg.src = "";
oimgView.style.display = "none";
lables.style.display = "block";
// 删除lable里的input,只有这样才可以清楚里面的值
lables.removeChild(lables.firstElementChild);
// 创建新的input，并添加进lable
var newNode = document.createElement("input");
newNode.type = type = "file";
newNode.accept = "image/*";
newNode.hidden = "hidden";
newNode.setAttribute("onchange", "imgChange()");
lables.appendChild(newNode);
}
功能性的Js里，关键的点在于imgChange函数里，通过判断files[0]的存在，来区分用户是点击了图片呢，还是点击了取消。（之前一直卡在这个上面，真是刻骨铭心啊！）这里用到了HTML5 的 web API FileReader，有兴趣的小伙伴可以百度了解下。
