jsp 设置自己喜欢的input:file样式

来源:互联网 发布:拼多多与淘宝 编辑:程序博客网 时间:2024/05/16 07:24

在web前端开发的过程中,我们难免不会遇上文件上传的功能。但是自带的input:file样式也太丑了,如何设置自己喜欢的样式呢?

我们要做如下几步:

1.input:file隐藏

2.在input:file上设置自己的input:text and input:button。

代码如下:

<tr>

<td>

<input type="text" class="yourClassName" name="filePath" id="filePath"/>
<input type="file" id="txtfilePath" name="txtfilePath" style="display:none;">
<input type="button" onclick="txtfilePath.click()" id="fileup" name="fileup" 
class="
yourName" value="上传">

</td>

</tr>

<script type="text/javascript">
document.getElementById("txtfilePath").onchange = function() {
document.getElementById("filePath").value = this.value;
};

</script>

yourClassName 是显示文件路径的input的样式名儿。(自己觉得怎么漂亮怎么定义)

yourName是显示上传字样的button样式名儿。(自己觉得怎么漂亮怎么定义)

0 0