您的位置:首页 > Web前端 > CSS

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

2013-12-23 10:01 555 查看
在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样式名儿。(自己觉得怎么漂亮怎么定义)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: