前端入坑紀 30
今天項目中碰到如題的效果。講真，我的內心是拒絕的。
原因還是input file 文件上傳 這個按鈕的鍋。
一直到目前為止，都沒搜索和咨詢到，如何取得input file 的取消事件。就是用戶點了上傳文件，選著選著，最后點了取消。貌似只能間接的通過onchange 來判定value，然后確定是否為空，也就是取消的狀態。
可是，這樣得第一次點了，它取消了。第二次再點，才好識別出onchange是空的。簡單說就是要點兩次，這樣的話，并不適合我目前這個項目的需求。
如果這段文字讓你看得云里霧里，那就請直接看下面的項目正文吧！
上代碼才是真理，其他都是浮云！
真實項目效果圖
OK，first things first！項目鏈接
HTML 結構
<div class="infoEdt">
<div class="clear">
<label class="fl">姓名</label><input type="text" class="fr" placeholder="馮燕">
</div>
<div class="clear" style="border:none">
<label class="fl">聯系方式</label><input type="text" class="fr" placeholder="135662454777">
</div>
</div>
<div class="imgUps">
<p class="clear">
<span class="fl">圖片上傳</span><span class="fr" style="color:#999">最多上傳10張圖</span>
</p>
<form id="formImg">
<section id="divElesWrp" class="clear">
<a id="addPic" class="fl" href="javascript:;"></a>
</section>
<a class="upsBtn" href="javascript:;" id="bmBtn">確認報名</a>
</form>
</div>
請忽略上面的input框，和本文的效果無關，您看看就好。
CSS 結構
/*rest style*/
body {
padding: 0;
margin: 0;
background-color: #f4f4f4;
max-width: 640px;
margin: 0 auto;
}
p {
padding: 0;
margin: 0;
}
ul,
li {
padding: 0;
margin: 0;
list-style: none;
}
a {
text-decoration: none;
color: #525252;
}
img {
vertical-align: middle;
}
input,
button {
outline: none;
background: none;
border: none;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clear::after {
display: block;
content: "";
clear: both;
}
/*page style*/
.infoEdt {
background-color: #fff;
padding: 0 2%;
margin-bottom: 6px;
}
.imgUps section {
background-color: #fff;
padding: 2% 1% 6%;
width: 98%;
}
.imgUps p {
padding: 0 2%;
line-height: 40px;
background-color: #fff;
}
.infoEdt div {
font-size: 14px;
line-height: 45px;
color: #000;
border-bottom: 1px solid #dfdfdf
}
.infoEdt input {
line-height: 45px;
text-align: right
}
.imgUps span {
font-size: 15px;
color: #000;
}
.imgUps form div {
position: relative;
width: 0;
height: 0;
background-color: #f3f3f3;
padding: 12%;
margin: 1% .5%;
float: left;
background-size: 100% auto;
background-position: center center;
background-repeat: no-repeat
}
.imgUps form div>em {
display: block;
position: absolute;
border-radius: 50%;
height: 26px;
width: 26px;
font-style: normal;
color: #fff;
line-height: 30px;
text-align: center;
top: 0;
right: 0;
background-color: #f3557b;
background-image: url('wrap/img/loginBack.png');
background-size: 47% auto;
background-position: center center;
background-repeat: no-repeat
}
#addPic {
display: block;
height: 0;
width: 0;
padding: 12%;
margin: 1% .5%;
float: left;
background-image: url('wrap/img/addPic.png');
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat
}
.upsBtn {
display: block;
background-image: linear-gradient(-132deg, #f3557b 0%, #fa7157 100%);
border-radius: 9px;
width: 92%;
text-align: center;
margin: 6% 4%;
line-height: 45px;
font-size: 18px;
color: #ffffff;
}
添加的圖片是會顯示為 .imgUps 里 form 內的 div 的背景，每個div是浮動布局的。同時，添加的按鈕#addPic也是浮動的。點完后自動生成的input，故意注釋了隱藏，以便后臺查看。
JS 結構
var oUpBtn = document.getElementById("addPic");
var oform = document.getElementById("formImg");
var odWrp = document.getElementById("divElesWrp");
var obmBtn = document.getElementById("bmBtn");
var i = 0;// 為新添加的元素加id時，自動加上i
// 這里的原理在 11篇《圖片上傳之在線預覽》講過，基本類似，就不贅述了
function imgChange(ths) {
var oinpt = ths;
var freader = new FileReader();
var ofile = oinpt.files[0];
if (ofile) {
freader.readAsDataURL(ofile);
freader.onload = function() {
var newNode = document.createElement("div");
var spanEm = document.createElement("em");
spanEm.setAttribute("onclick", "delBoth(this)")
newNode.appendChild(spanEm);
newNode.setAttribute("id", oinpt.id + "d");
odWrp.insertBefore(newNode, oUpBtn);
newNode.style.backgroundImage = "url(" + this.result + ")";
}
}
}
// 點擊了預覽圖的X按鈕后，刪除對應的input file 和 該預覽圖。
function delBoth(ths) {
var oEm = ths;
var strs = oEm.parentNode.getAttribute("id"); // 獲取預覽圖的id
var newStrs = strs.substring(0, strs.length - 1); // 刪除末尾的字符，就是input file 的id
odWrp.removeChild(oEm.parentNode);
oform.removeChild(document.getElementById(newStrs));
}
// 刪除空的input file的按鈕，因為用戶可能點擊了上傳文件，最后有可能取消了。那生成的input file卻依舊在，所以需要這個
function clearEnpt(oinpt) {
if (oinpt.value == "") {
oform.removeChild(oinpt);
}
}
// 每次點擊addPic按鈕時的操作
oUpBtn.onclick = function() {
var mInputs = oform.getElementsByTagName("input");
// 創建新的input file元素并添加
var eleInpt = document.createElement("input");
eleInpt.type = "file";
eleInpt.id = "file" + i;
eleInpt.name = "imgs" + i;
// eleInpt.setAttribute("hidden", "hidden");
eleInpt.setAttribute("onchange", "imgChange(this)");
oform.appendChild(eleInpt);
i++;
// 刪除空的input file，除最后一個（因為它是我們上面才創建的，所以這里有坑.....）
for (var j = 0; j < mInputs.length - 1; j++) {
clearEnpt(mInputs[j])
}
// 200毫秒后模擬input file 的點擊效果
setTimeout(function() {
eleInpt.click();
}, 200);
}
基本備注已經添加完畢，感興趣的小伙伴可以研究下！那個最后一個input 如果為空，目前有兩種法子，要么最后點擊“確認報名”時，再清除一遍空的input file。或者直接讓后端，過濾掉空的。
好了，到此，本文告一段落！感謝您的閱讀！祝你身體健康，闔家幸福！
