修改上传文件的按钮样式

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]))

})

以上是关于修改上传文件的按钮样式的主要内容,如果未能解决你的问题,请参考以下文章

input(file)样式修改及上传文件名显示

修改 jQuery Mobile (jqm) 文件上传按钮

如何将上传文件的浏览按钮修改为自定义按钮

input[tyle="file"]样式修改及上传文件名显示

完成FileUpload的文件上传功能,且可改按钮样式

如何改上传文件按钮样式