剛好之前項目需要，做過類似的，效果截圖如下。

鼠標移入效果：

并且支持預覽和刪除的功能，我的實現(xiàn)大致思路是：隱藏input標簽，然后通過label標簽的for屬性來觸發(fā)input標簽上的onChange事件，然后將label標簽樣式修改成自己想要的樣式即可。
html大致結構，因為項目用的react，所以label上對應的屬性是htmlFor：

<div>
    <input
      type="file"
      id='file'
      accept="image/jpeg, image/gif, image/png, image/bmp"
      styleName="input-file"
      onChange={e => {
        this.onFileChange(e);
      }}
    />
    <label htmlFor="file" styleName="ant-upload">
    </label>
</div>

希望對你有幫助~~~

找美工給你設計一個。然后

#img_upload {
 //your styles
}

正確的做法是

隱藏這個input，用div或者button來占位且綁定onclick事件來手動觸發(fā)input的click效果…然后div/button的樣式就可以隨便搞了…

用div模擬一個

隱藏 <input type="file">，使用 <label> 代替。

實際上表單元素大多數(shù)都是 ShadowDOM，很難直接修改樣式，提升視覺效果和交互體驗都要靠 <label>。題主不妨看下我的講堂 寫 CSS 也要開腦洞：萬能的 :checked + label，可以了解更多用法。