如何將上傳文件的瀏覽按鈕修改為自定義按鈕


  最近,在修改一個國際化項目,碰到一個上傳文件的地方,要將顯示為的瀏覽按鈕修改為自定義英文的英文按鈕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>

  頁面截圖如下:

  

  后台可以獲取到對應的文件和文件名:

  

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM