問題描述

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

解決方案

建立一個button按鈕，在其上面覆蓋表單框，且設置表單的透明度為0，這樣雖然用戶看到的是button，但是點擊的確實

將隱藏，當點擊button的時候，去觸發的點擊，用戶點擊的是button，但是觸發的是input的事件。

實現方案

設置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，在網站攻擊的時候也可能會用到這種方法，當用戶誤以為點擊了底層的元素，但是實際上點擊的頂層看不見的元素，導致泄密。

設置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事件，當文件域的值改變時同時修改對應表單內的值。

總結

以上是生活随笔為你收集整理的[JS][前端]修改文件input为button样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。