如何將上傳檔案的瀏覽按鈕修改為自訂按鈕

標籤：

　　最近，在修改一個國際化項目，碰到一個上傳檔案的地方，要將顯示為的瀏覽按鈕修改為自訂英文的英文按鈕Brows，雖說那個按鈕會根據系統語言自動切換，但就是在自己電腦上看著不爽，非要改成英文。

　　大致思想就是：將真的file進行隱藏，使用普通的text和button拼接成我們的檔案上傳樣式。然後設定button的onclick事件，該事件響應的是又是file的click事件，最後設定file的onchange事件，當file改變時將file的value值填充到text的value中（也就是檔案的上傳路徑）。

　　代碼如下：

　　<form action="FileUploadServlet" enctype="multipart/form-data" name="fileUploadForm">
　　　　<input type="file" name="docFile" id="docFile" style="display: none;"
　　　　onchange="document.fileUploadForm.filePath.value=this.value"/>
　　　　<input type="text" name="filePath" id="filePath"/>
　　　　<input type="button" value="Brows" onclick="document.fileUploadForm.docFile.click()"/><br>
　　　　<input type="submit" value="提交"/>
　　</form>

　　頁面如下：

　　

　　後台可以擷取到對應的檔案和檔案名稱：

　　

 

 

如何將上傳檔案的瀏覽按鈕修改為自訂按鈕