关于input type=“file”文件上传控件的美化

　　项目中，很多情况下都会遇到图片或者文件上传的情况，但是html自带的上传控件属实有点丑陋，如下图，拿出去领导嫌丑，那么，考虑做美化

 

 

 

 

　　这样的页面，说实话很难让人接受，但是我对于前端，说实话比后端更差，但是也不能因为不会而不改，所以我想了一个捷径

<input type="file" id="fileupload" onchange="changeurl()">

　这个不是丑么，那我藏起来别让人看见不就好了吗 加上hidden属性 但是已经被标记了file，那么加上style样式 如下

  <input type="file" style="display: none" id="fileupload" onchange="changeurl()">

并且加了一个onchange的触发事件，然后就简单了，你可以自定义一个button  或者a标签，样式按照自己喜欢的样式加上各种css都没问题的，最后只需要给这个button  或者a标签加上一个点击事件onclick事件，甚至可以使用img标签，我就是使用了img标签

<img src="images/upload.png" id="fileupload_url" onclick="update_guideurl()" 
style="width: 75%;height: 100px;border-width: 1px;border-color:#bfbfbf;border-style: solid">

然后就可以使用js 完成调用file控件了

//触发input file的点击事件
function update_guideurl() {
    document.getElementById("fileupload").click(); }

这样就可以试用点击图片来达到上传控件的调用了，但是这样还有一个问题，文件上传没问题了，也可以使用from表单提交到后台了，但是不能是事件上传的图片及时在页面展示，这个问题就可以使用ajax局部刷新了，具体实现方式，下一篇介绍，欢迎大佬们指正批评。