jQuery自製upload file介面

因為安全性的問題，在一般網頁要改input=file的介面基本上是不可能的，不過我們可以用一些小技巧來達成自定上傳介面的方法。

首先準備這樣的html結構。
<div class="fake_upload_filed">
<input type="file" class="fake_upload_file" />
<span>Browse..</span>
<div class="fake_cover">
<input type="text" class="fake_file_path">
<a class="fake_img"></a>
</div>
</div>

要自訂上傳介面，我們還是要有一個input type=file，然後把他的透明度設為0，記住是透明度為0，而不是display=none，兩者的差別在於一個會從網頁裡消失，一個是看不到，但他還存在，這樣才可以按到他並使用檔案上傳的功能，然後還放了一個input type=text，是之後可以用來放file path的地方，這樣看起來會更像。


準備一個你要蓋上去的圖片，因為我還希望使用者可以看到路徑，所以我有留一個假的file path欄位。

之後使用position去定位，注意z-index的高度，另外因為我在專案的時候需要考慮到多語系的問題，所以我用了一個span把瀏覽的字樣塞進去，這樣之後就可以彈性修改裡面的文字了。

最後只要把抓到的檔案路徑丟給文字欄位就好了。

view plaincopy to clipboardprint?

1. $(".fake_upload_file").change(function(){   
2.     //取得input type=file的path   
3.     var file_path=$(this).val();   
4.     //丟到input type=text內   
5.     $(".fake_file_path").val(file_path);   
6. });  

Demo