实现思路:
- a标签包裹input元素
- 设置a标签为上传按钮的样式,相对定位
- 设置input为透明,绝对定位,覆盖到a上面
效果:看到的按钮是a的样式,点击时实际是点击input元素。样式和功能都具备
html代码:
<a href="javascript:;" class="file">选择文件
<input type="file" >
</a>
CSS代码:
.file {
position: relative;
display: inline-block;
border: 1px solid #333;
padding: 4px 10px;
overflow: hidden;
text-decoration: none;
text-indent: 0;
line-height: 20px;
border-radius: 5px;
color: #000;
background:#ccc; /* 一些不支持背景渐变的浏览器 */
background:-moz-linear-gradient(top, #fff, #ccc);
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#ccc));
background:-o-linear-gradient(top, #fff, #ccc);
}
.file input {
position: absolute;
font-size: 50px;
right: 0;
top: 0;
opacity: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
效果:
此时上传文件的文件名不显示,需要用js处理:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$(
".file"
).on(
"change"
,
"input[type='file']"
,
function
(){
var
filePath=$(
this
).val();
if
(filePath.indexOf(
"jpg"
)!=-1 || filePath.indexOf(
"png"
)!=-1){
$(
".fileerrorTip1"
).html(
""
).hide();
var
arr=filePath.split(
'\\'
);
var
fileName=arr[arr.length-1];
$(
".showFileName1"
).html(fileName);
}
else
{
$(
".showFileName1"
).html(
""
);
$(
".fileerrorTip1"
).html(
"您未上传文件,或者您上传文件类型有误!"
).show();
return
false
}
})
|
效果: