文件上传框样式美化

先展示效果图：（没有上传图片的样子）（上传图片后的样子）  没有美化之前的样式（外面的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"
onclick="$('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>