比如有個(gè)需求,是點(diǎn)擊一個(gè)按鈕進(jìn)行上傳圖片.
如何實(shí)現(xiàn)這個(gè)效果呢?
我的做法是 給input外層 裹上一層div
<div class="btn btn-lg btn-outline-primary change-photo">更換頭像
<input class="change-photo-btn" type="file" accept="image/jpg,image/png,image/jpeg,image/bmp">
</div>
然后把div的樣式 處理成button的一樣. 那么重點(diǎn)來了, input的屬性怎么寫呢?
我是這么處理的
把外層div : { position: relative; }
input { position: absolute; top: 0; left: 0; opacity: 0; cursor: pointer; height: 40px; width: 88px; }
對 ,沒錯(cuò) ;就是 opacity 這只為零;
然后去寫 change-photo-btn 的onchang事件. 去操作上傳的file 就可以了.
但是 還有個(gè)煩人的效果很難搞; 就是鼠標(biāo)放上去之后,會(huì)有個(gè) 未選擇任何文件 的提示. 如圖:
那么這個(gè)如何處理呢?
請看代碼:
<div class="btn btn-lg btn-outline-primary change-photo">更換頭像
<label class="change-photo-btn">
<input class="change-photo-btn" type="file" accept="image/jpg,image/png,image/jpeg,image/bmp" style="
display:none;">
</label>
</div>
我給input 的最外層裹了一個(gè)label. 類名與Input相同. 同時(shí), 在Input中, 寫上 style="
display:none;" 就可以了
大家可以去試試效果. 看看是不是完美解決.
