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

修改 文件上传 默认样式

2016-07-05 13:02 453 查看
jsp:
<h3>选择文件导入 :</h3></strong><br/>
<form action="${base}/yellowPage01/leadin/lot/save" method="post" enctype="multipart/form-data" >
<a  class="a-upload">
<input type="file" name="file" id="file">点击这里上传文件
</a><span  id="showFileName" class="b-upload"  ></span>
<div class="form-button" ><br/>
<button id="submit_edit2" class="button bg-main">批量导入</button>
</div>
</form>

css:<style type="text/css">
.a-upload {

padding: 4px 10px;
height: 30px;
line-height: 20px;
position: relative;
cursor: pointer;
color:#fff ;
background: #0ae;
border-color:  #0ae;

border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1
}
.b-upload {

padding:4px  ;
height: 30px;
line-height: 20px;
position: relative;
cursor: pointer;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1;
}

.a-upload  input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer
}

.a-upload:hover {
color: #fff;
background:  #0ae;
border-color:  #0ae;
text-decoration: none
}
</style>

js:$(".a-upload").on("change","input[type='file']",function(){
var filePath=$(this).val();
var arr=filePath.split('//');
var fileName=arr[arr.length-1];
$("#showFileName").html(fileName);
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: