文件上传框样式美化

先展示效果图：

（没有上传图片的样子）

（上传图片后的样子）

  

没有美化之前的样式（外面的input框是我自己加上去的）

ok，说一下思想，首先是建一个input框，type设置为file，但是必须是隐藏的，因为不隐藏就变会显示默认的样子，我觉得有点丑，接着再建一个input框，type设置为text就可以了，用来存放我们上传的文件路径，然后，设置一个a标签，样式取boostrap的按钮样式，当然，你喜欢的话，可以直接建一个按钮，将按钮浮动起来（float：left）然后拼在一起，在js中设置，点击a标签的时候，自动执行点击type=file的input框。ok，大功告成，代码如下：

<input name="hotelImgFile" id="hotelImgFile" type="file" style="display: none"/>   //隐藏的input，真正的上传文件框
<div class="input-append">						           //设置div 样式来自boostrap
       <input id="photoCover" type="text" class="form-control"			   //我们能看到的input框
        style="float: left; width: 350px" >
        <a class="btn btn-default" style="border-radius: 0px; width: 50px"
        οnclick="$('input[id=hotelImgFile]').click();">浏览</a>
</div> 


//图片上传赋值事件
<script type="text/javascript">
	$('input[id=hotelImgFile]').change(function() {
		   $('#photoCover').val($(this).val());
		});
</script>




注意事件：如果没有导入boostrap和jQuery的相关文件，会没有效果的，相关文件大概是这些（每个人将他们放的路径不同，别直接复制进去就算了，查看路径是否正确）：
<link href="css/style.min.css" rel="stylesheet">


<script src="js/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>