美化input type="file" 文件上传表单

<div>
<img id="button" src="../image/plus.png"  alt="" title="">
<input type="file" accept="image/*" id="img" style="display:none" onchange="img();" />
</div>
<script type="text/javascript">
$("#button").click(function() { 
  //绑定点击，使files触发点击事件，然后完成读取文件的操作。
    $("#img").click();
});
function img() {
//图片预览
    var img = $("#fengmian")[].files[];
    $("#button2").attr('src', URL.createObjectURL(img));
}
</script>
           

1. img覆盖默认的上传input控件界面
2. accept=”image/*” 限定选择文件类型为图片
3. style=”display:none” 隐藏默认的界面
4. 给图片绑定点击事件，回调中触发file的点击事件
5. input onchang 触发 img函数 设置图片预览