如何将上传文件的浏览按钮修改为自定义按钮

　　大致思想就是：将真的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>

　　页面截图如下：

　　


　　后台可以获取到对应的文件和文件名：

　　


 

 


逝者如斯夫，不舍昼夜，为爱的人去努力，为爱的事去奋斗。