比如有個需求,是點擊一個按鈕進行上傳圖片.
如何實現(xiàn)這個效果呢?
我的做法是 給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的一樣. 那么重點來了, input的屬性怎么寫呢?
我是這么處理的
把外層div : { position: relative; }
input { position: absolute; top: 0; left: 0; opacity: 0; cursor: pointer; height: 40px; width: 88px; }
對 ,沒錯 ;就是 opacity 這只為零;
然后去寫 change-photo-btn 的onchang事件. 去操作上傳的file 就可以了.
但是 還有個煩人的效果很難搞; 就是鼠標放上去之后,會有個 未選擇任何文件 的提示. 如圖:
那么這個如何處理呢?
請看代碼:
<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 的最外層裹了一個label. 類名與Input相同. 同時, 在Input中, 寫上 style="
display:none;" 就可以了
大家可以去試試效果. 看看是不是完美解決.
