html+css上传文件控件美化

最新推荐文章于 2024-06-29 16:04:34 发布

echo008

最新推荐文章于 2024-06-29 16:04:34 发布

阅读量7.8k

点赞数 2

本文链接：https://blog.csdn.net/echo008/article/details/51425217

版权

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，火狐，谷歌都正常。

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

echo008

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
html+css上传文件控件美化

html+css美化上传文件控件上传文件 label{ display:inline-block; width:160px; height:40px; line-height:40px; text-align: center; background:#BE1A21; font-size:18px; color:
复制链接

扫一扫