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

})

修改上传文件的按钮样式