Modify the button style of the uploaded file

CSS style:

. 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 code:

<a href= "javascript:;" class= "A-upload" >
<input type= "File" name= "id=" "> Upload Avatar
</a>
<div class= "Showfilename" ></div>
<div class= "Fileerrortip" ></div>

jquery Code

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

})

Modify the button style of the uploaded file