修改文件上传的默认样式

修改文件的上传样式
默认的上传样式看起来有点丑，我们经常可能要去修改它，input file上传按钮的美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实现了美化功能。
直接上代码：如下

//css
<style>
	#upload{
		padding: 0px 15px;
		line-height: 30px;
		position: relative;
		text-decoration: none;
		cursor: pointer;
		background-color: #25a3eb;
		color: #fff;
	}
	.replyFileid{
		position: absolute;
		overflow: hidden;
		right: 0;
		top: 0;
		opacity:0;
		cursor: pointer;
	}
</style>

//html
<button id="uplaod" class="btv_bth form_btnblue">上传文件
		<input type="file" name="upload_file" id="file" class="replyFileid">
</button>
<span id="toUploadFile"></span>

如果想要控制上传的文件名显示出来，就得用到js了

<script type="text/javascript">
		window.setTimeout(function() {
			document.getElementById("file").addEventListener("change",function (e) {
                var nameArr = e.currentTarget.file;
                var bodyFile = document.getElementById("toUploadFile");
                bodyFile.innerHTML =  nameArr[i].name;
            });
		}, 500);
	</script>

最后的对比显示效果如下：

样式可以按照你喜欢的样子来设置。