html檔案上傳控制元件file自定義樣式
阿新 • • 發佈：2018-12-23
問題：
HTML自帶的file上傳按鈕因在各種瀏覽器裡顯示樣式不一、不易自定義樣式給我們帶來很大的麻煩。
解決思路：
將input[type=file]控制元件隱藏，使用一個input[type=text]和button組合作為file控制元件的替代（樣式自行定義），並將隱藏的file控制元件和作為替代的text和button控制元件做事件同步關聯，這樣我們在操作text和button的時候，同時觸發file控制元件，表單提交時，file控制元件提交。
示例程式碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>檔案上傳</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </head> <body> <form name="frm" id="frm" action="/remote_service/upload2/parseRuleFilePath.htm" method="post" enctype="multipart/form-data"> <input type="text" name="fileShowName" id="fileShowName" readonly="readonly" /> <!-- 按鈕的onclick事件關聯file的onclick事件，點選按鈕效果等同於點選file控制元件 --> <input type="button" id="fileButton" name="fileButton" value="瀏覽" onclick="$('#submitFile').click();" /> <!-- 隱藏的file控制元件值改變時同步更新到text上 --> <input name="submitFile" id="submitFile" type="file" style="display: none;" onchange="$('#fileShowName').val($(this).val());" /> <input type="submit" value="提交" /> </form> </body> </html>