###### tags: `html`, `front-end`
# 【自學筆記】input file選擇彈窗的預先檢查

這次的專案使用到`input file`處理上傳檔案的功能

然後我需要在==上傳檔案之前檢查==是否符合條件，若是不符合則不給上傳
如此簡單的需求，卻讓我疑惑了很久 :confused:

原本的想法很簡單，就是點擊上傳時，先檢查狀態，然後不符合就`e.preventDefault`

<label class="upload-btn" @click="uploadCheck">
    <span>Upload</span>
    <input type="file" @change="upload"/>
</label>

uploadCheck: function(e){
    let self = this
    if(self.uploadType == 'choose' || !self.uploadType){
        e.preventDefault()
        return false
    }
}

:::danger
但這樣不行！沒辦法阻止上傳檔案的彈窗彈出
:::

---

後來用比較土炮的方法解了這問題...

簡單來說就是在按鈕上蓋一層透明的`div`

<div v-if="uploadType == 'choose'" @click="uploadCheck"></div>
<label class="upload-btn" >
    <span>Upload</span>
    <input type="file" @change="upload"/>
</label>

uploadCheck: function(e){
    let self = this
    if(self.uploadType == 'choose' || !self.uploadType){
        alert("先選擇專案")
    }
}

有一層`div`蓋在上面就點不到下面的上傳按鈕了
所以只要判斷狀態，決定要不要移除掉上方的`div`即可達成目的

---

*新手工程師的筆記，純粹記錄學了些啥東西
如果有前輩高人讀了我的文，文中有任何錯誤再麻煩指教指教*