修改上传文件按钮样式,并且显示选择的文件名

Mon Dec 14 09:30:58 CST 2015 1814 Web

文章摘要用css修改上传文件按钮样式,并且显示选择的文件名。

我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?网上有不少例子,但是很多都无法解决美化按钮后,无法显示选择的文件名的问题。文章提供一种解决方法,抛砖引玉。


方法:

input type='file'上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,间接实现了美化功能。但是这样做会在选择了文件之后看不到选择的文件名,因此需要用js获取选择到的文件名,再显示在页面上。


不多说,看例子:


html代码:

<html>
	<head>
		<title>测试</title>
		<style>
			.file {
				position: relative;
				display: inline-block;
				background: #D0EEFF;
				border: 1px solid #99D3F5;
				border-radius: 4px;
				padding: 4px 12px;
				overflow: hidden;
				color: #1E88C7;
				text-decoration: none;
				text-indent: 0;
				line-height: 20px;
			}
			.file input {
				position: absolute;
				font-size: 100px;
				right: 0;
				top: 0;
				opacity: 0;
			}
			.file:hover {
				background: #AADFFD;
				border-color: #78C3F3;
				color: #004974;
				text-decoration: none;
			}
		</style>
	</head>
	
	<body>
		<a href="javascript:;" class="file">选择文件
			<input type="file" name="" id="" onchange="showName(this.value)">
		</a>
		<!-- 用于显示选择的文件名 -->
		<span id="fileName"></span>
		<script>
			//input type="file"的onchange事件,获取文件名并显示到页面上
			function showName(name) {
				document.getElementById("fileName").innerHTML=name
			}
		</script>
	</body>
</html>

复制到代码到一个文本文件中,并重命名为.html后缀,用浏览器打开,试试效果吧。


打赏
打赏

分享到:




make命令和makefile文件