html+css上传文件控件美化

来源：互联网发布：网络监控录像机安装编辑：程序博客网时间：2024/05/29 07:35

html+css美化上传文件控件

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>上传文件</title><style>label{display:inline-block;width:160px;height:40px;line-height:40px;text-align: center;background:#BE1A21;font-size:18px;color:#fff;cursor:pointer;}/*隐藏默认样式*/input[id=file]{margin-left:-2000px;height:0;}</style><script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!--[if lt IE 9]>      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>    <![endif]--></head><body><div><label for="file" id="upFile">上传文件</label><input type="file" id="file"></div><div><p id="fileName"></p><img src="" id="fileImg"></div><script>$("#file").on("change",function(){//截取路径，获取上传文件名var urlArr = this.value.split("\\");if (this && this.files && this.files[0]) {document.getElementById("fileName").innerHTML = urlArr[urlArr.length-1];var fileUrl = URL.createObjectURL(this.files[0]);document.getElementById("fileImg").src = fileUrl;}else{//兼容IE9以下document.getElementById("fileName").innerHTML = urlArr[urlArr.length-1];document.getElementById("fileImg").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";                document.getElementById("fileImg").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = this.value;}});</script></body></html>

经测试IE，火狐，谷歌都正常。

最后点击上传的样子。如果不需要缩略图的话，自行删减代码。

0 0