How to modify the browse button of an uploaded file to a custom button

Recently, in the modification of an internationalized project, encountered a place to upload files, to be displayed as the browse button to customize the English button brows, although the button will automatically switch according to the system language, but it is in their own computer to look uncomfortable, do not want to change into English.

The general idea is: To hide the real file, using the normal text and buttons to stitch into our file upload style. Then set the button's OnClick event, which responds to the file's click event, and finally sets the file's OnChange event, which populates the value of the file with value in text (that is, the upload path of the document) when file changes.

The code is as follows:

<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= "Submission"/>
</form>

The page is as follows:

　　

The corresponding files and file names can be obtained in the background:

　　

How to modify the browse button of an uploaded file to a custom button