美化上傳文件組件

現在做前端開發，寫業務代碼的，基本上都是調用現有的UI庫中的組件，比如bootstrap，ant deisgn等。相比較與瀏覽器自帶的使用type=file的input組件，網上的各種UI組件庫的上傳文件組件都非常美觀。如antd裡面的upload組件：

在使用antd的upload組件的時候，發現它並不非常適合某些項目：通過action欄位返回的東西，和我們直接發送ajax（fetch）請求返回的東西差很多。所以，決定自己寫一個基於type=file的input標籤的、美化過的上傳組件。

我們可以看到網上對這個主題也是探討的非常多，比如： https://stackoverflow.com/questions/572768/styling-an-input-type-file-button

基本思路

美化這個input組件用到的基本思路就是點擊帶有for（在react中是htmlFor）屬性的label標籤可以打開label標籤中for屬性對應（id）的type=「file」的input組件的），因此我們可以美化這個label標籤，然後把input組件的display設置為none，即不顯示這個input，在點擊label的時候，也會觸發點擊這個input標籤。

實現

<a> <input type="file" onChange={this.handleChange} id={"file-input-beaufy"} style={{display: none}} accept="image/jpg, image/jpeg, image/png" /> <label htmlFor={"file-input-beaufy"}><Icon type="upload" /><br />上傳</label></a>

寫法都是基於react的，因此會有onchang函數，htmlFor屬性等。同時還用到了antd裡面的icon組件

我們定義了一個display為none、type=「file」的input標籤，定義了一個指向這個input標籤的label，我們看到的將是label的東西，如下：

點擊icon或者上傳文字就可以打開上傳文件的對話框了。

注意：

id唯一性原則，如果寫成一個通用的組件，那麼需要為每個實例增加一個唯一id(可以從props傳入，也可以在組件內部隨意一個id。下面的例子是從props傳入)。

const FileUpload = ({id}) = <a <input type="file" onChange={this.handleChange} id={"file-input-beaufy"+id} stylex={{display: none}} accept="image/jpg, image/jpeg, image/png" /> <label htmlFor={"file-input-beaufy"+id}><Icon type="upload" /><br />上傳</label></a>

推薦閱讀：