修改上传文件的按钮样式
Posted JGG靖哥哥
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了修改上传文件的按钮样式相关的知识,希望对你有一定的参考价值。
css样式:
.a-upload {
padding: 0px 10px;
height: 30px;
line-height: 30px;
position: relative;
cursor: pointer;
color: #888;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1;
margin: 10px;
}
.a-upload input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer
}
html代码:
<a href="javascript:;" class="a-upload">
<input type="file" name="" id="">上传头像
</a>
<div class="showFileName"></div>
<div class="fileerrorTip"></div>
jquery代码
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
$(".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);
$(‘.appIcon‘).attr(‘src‘, getObjectURL($(this)[0].files[0]));
console.log(getObjectURL($(this)[0].files[0]))
})
以上是关于修改上传文件的按钮样式的主要内容,如果未能解决你的问题,请参考以下文章