前面的文章介绍过type=file的input，但是有没有发现这玩意是真的丑。
而且它的样式直接是修改不了的，因此需要一些巧方法来更改
1.
2.
上两个都是改过之后的效果，现在这整张图片或者下面那个按钮就是那个表单项。当然可以修改为更加高大上的，这里只是展示方法就比较简洁。
下面是方法：
先说那个简单的按钮，因为那个图片的表单项会有其他内容会在后面说。
<input class="load_hidden video_files" name="file" type="file" value="" onchange="load_video()">
<button type="button" class="w_btn fix_btn2">选择文件</button><span class="alert_show"></span>
这里我将上传文件的表单正常写，下面写的按钮是我需要让大家看到的效果。一说需要我想大概就能猜到了，让表单和按钮的大小一样，利用层级关系让表单在按钮的上一层，再让表单透明，这样的话点击按钮实际上是点击表单，只是那个表单你看不见罢了。
下面说一下上传图片文件后可以让图片回显在需要的地方
我们上传文件有时候不仅仅只是上传，可能还会需要预览我们上传的文件，比如上传头像这种，下面就用代码实现一下这种效果：
<img id="backimg" class="load_img" src="/static/admin/img/load.png">
<input accept="image/png,image/jpg" onchange="reads(this)">
同上述说的方式一样，首先需要准备一个可以显示图片的元素，让真正的表单在这个元素的上一层并且透明化。上面代码中的img就是我要预览的地方，在没有上传之前是上面的第一张图片
上传过之后就是这样：
这里是利用表单项的onchange属性来读取我定义的js，在js里让图片显示出来。
function reads(obj) {
var file = obj.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (ev) {
$("#backimg").attr("src", ev.target.result);
}
}
这个js代码不难，就是将读取到的表单项里面的文件路径设置为展示元素的src即可。