版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_35399846/article/details/79944122
主要html代码:
<a href="javascript:;" class="a-upload">
<div id="shangchuan" onchange="successload()">
</div>
//使用onchange而非onclick,onclick会在弹出框出现之前,而onchange会在选择完文件后
<script>
var filename = document.getElementById('file');
function getfilename(){
if(filename.files[0] == undefined){
alert('未上传文件!');
}
else{
//alert('上传成功!');
document.getElementById('shangchuan').innerHTML=filename.files[0].name;
}
}
</script>
css样式采用了:
http://www.haorooms.com/post/css_input_uploadmh
.a-upload {
padding: 4px 10px;
height: 20px;
line-height: 20px;
position: relative;
cursor: pointer;
color: #888;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
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: #444;
background: #eee;
border-color: #ccc;
text-decoration: none
}