美化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函數 設定圖檔預覽