前端入坑紀 11
最近這幾天一直在折騰這個在線預覽圖片的功能，關鍵是項目要求可以由用戶創(chuàng)建多個上傳圖片的按鈕，每個按鈕代表一個上傳控件。可能是我想復雜了，或者本身功力不到家?？傊?，做得自己都快嘔血了。
俗話說，功夫不負有心人。最終還是搞出來了，現在單單精簡一個，來給大家展示下效果。說真的，單單做一個，還TM簡單??！真是沒有對比沒有傷害～
截圖
OK，first things first！項目鏈接
HTML 結構
<div class="imgView">
<a href="javascript:;">chang</a>
<a href="javascript:;">close</a>
<img src="" alt="">
</div>
<!--由于這里的input會被重新創(chuàng)建，所以事件要寫在里面才會有效-->
<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];
// 存在文件時，執(zhí)行這里的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);
// 創(chuàng)建新的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]的存在，來區(qū)分用戶是點擊了圖片呢，還是點擊了取消。（之前一直卡在這個上面，真是刻骨銘心?。。┻@里用到了HTML5 的 web API FileReader，有興趣的小伙伴可以百度了解下。
