兼容IE浏览器样式的html上传文件控件

最新推荐文章于 2019-06-03 15:25:36 发布

atjw25188

最新推荐文章于 2019-06-03 15:25:36 发布

阅读量275

点赞数

原文链接：http://www.cnblogs.com/NickyLi/p/7488673.html

版权

为解决不同浏览器下HTML上传文件控件显示效果不一的问题，本文介绍了一种通过包裹原生input file元素并自定义CSS样式的方法，实现跨浏览器一致的上传控件外观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在公司做项目时需要用到html的上传文件控件，但发现原生的上传文件控件<input type="file" />在IE、Chrome浏览器的显示效果相差很大，为了统一样式，我参考了网上的许多方法，下面给出我自己的代码实现（实际上就是在原生的input file上面加个外壳，再添加一些样式，让它看上去不像原生的这么丑）

html部分

<div class="upload-box">
	<div class="input">
		<input type="file" id="input" size="45"/> <!--原生的file-->
	</div>
	<div class="upload">
		<div class="upload-choose">选择文件</div>
		<div class="upload-info"></div>
	</div>
</div>

css部分

 1 .upload-box {
 2     position: relative;
 3 }
 4 
 5 .input {
 6      height: 30px;
 7      position: absolute;
 8      top: 0px;
 9      left: 0px;
10 }
11 
12 input[type="file"] {
13      border: 1px solid red;
14      width: 480px;
15      opacity: 0;
16 }
17 
18 input[type="submit"] {
19      width: 100px;
20      height: 30px;
21      background: #ddd;
22      border: none;
23 }
24 
25 .upload-choose {
26      width: 80px;
27      height: 30px;
28      background: #eee;
29      float: left;
30      text-align: center;
31      line-height: 30px;
32      font-family: "Microsoft YaHei";
33      font-size: 14px;
34      font-weight: bold;
35 }
36 
37 .upload-info {
38      width: 400px;
39      border: 1px solid #eee;
40      height: 28px;
41      line-height: 28px;
42      float: left;
43      padding-left: 5px;
44      overflow: hidden;
45 }

js部分

1 $(function(){
2     $("#input").change(function(){
3     var filename_split = $(this).val().split("\\");
4     var filename = filename_split[filename_split.length - 1];
5     $(".upload-info").text(filename);
6     }); 
7 });