如何美化input[type=”file”]
基本思路是:
(1)首先在 input 外层套一个 div ;
(2)将 div 和 input 设置为一样大小(width和height);
(3)设置 div 为相对位置, input 为绝对位置,并将 input 的 top 和 right 设为 0 ;
这样, div 和 input 就重叠了,点击 div 就相当于点击 input ;
(4)设置 input 的 opacity 为 0 ,全透明,这样就只能看见 div 了;
至于 div 的样式就随便设置了。
html:
<form action="#" enctype="multipart/form-data" method="post">
<div class="fileupload">
<script>
function getFilename(){
var filename=document.getElementById("file").value;
if(filename==undefined||filename==""){
document.getElementById("filename").innerHTML="点击此处上传文件";
} else{
var fn=filename.substring(filename.lastIndexOf("\\")+1);
document.getElementById("filename").innerHTML=fn; //将截取后的文件名填充到span中
}
}
</script>
<span id="filename">点击此处上传文件</span>
<input type="file" name="file" id="file" onchange="getFilename()"/>
</div>
</form>
css:
/*文件上传*/
.fileupload{
position: relative;
width:200px;
height:35px;
border:1px solid #66B3FF;
border-radius: 4px;
box-shadow: 1px 1px 5px #66B3FF;
line-height: 35px;
padding-left: 8px;
overflow: hidden;
}
.fileupload input{
position: absolute;
width:200px;
height:35px;
right:;
top:;
opacity:;
filter: alpha(opacity=0);
-ms-filter: 'alpha(opacity=0)';
}
注意:input[type=”file”] 的文件路径是受保护的,用 js 获取不到,使用上传的插件可以获取到。(只是从前端的角度讲)