問題描述

在開發的時候，遇到了需要提交表單檔案的需求，但是原生<input>標籤特別不好看，而且還有點選提交檔案的提示，這樣很影響美觀，於是便想著更改<input>為<button>按鈕。

解決方案

1. 建立一個button按鈕，在其上面覆蓋表單框，且設定表單的透明度為0，這樣雖然使用者看到的是button，但是點選的確實
2. 將隱藏，當點選button的時候，去觸發的點選，使用者點選的是button，但是觸發的是input的事件。

實現方案

1. 設定input透明度為0的方法

<input class="file" accept="image/*"
 
 name="file" type="file">
<input class="btn" id="submit" value="點選拍照上傳" type="button">

對應的css樣式

.file {
    width: 150px;
    height: 50px;
    position: absolute;
    top: 50px;
    left: 30%;
    z-index: 1;
    opacity: 0;
}
.btn {
    width: 150px;
    height: 50px;
    font-size: 16px;
    color
 
: #fff;
    background: #28abde;
    border-radius: 5px;
    position: absolute;
    top: 50px;
    left: 30%;
}

這種方法是加了一層看不見的input，使用者看到的是button，但是點選的卻是input，在網站攻擊的時候也可能會用到這種方法，當用戶誤以為點選了底層的元素，但是實際上點選的頂層看不見的元素，導致洩密。

1. 設定input不可見，並由button去觸發。

<form name="form1">
　<input type="file" name="picpath"
 
 id="picpath" style="display:none;" onChange="document.form1.path.value=this.value">
　<input type="button" value="上傳檔案" onclick="document.form1.picpath.click()"> 
</form>

當用戶點選button按鈕的時候會觸發click事件，當檔案域的值改變時同時修改對應表單內的值。