因為安全性的問題，在一般網頁要改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把瀏覽的字樣塞進去，這樣之後就可以彈性修改裡面的文字了。
最後只要把抓到的檔案路徑丟給文字欄位就好了。
- $(".fake_upload_file").change(function(){
- //取得input type=file的path
- var file_path=$(this).val();
- //丟到input type=text內
- $(".fake_file_path").val(file_path);
- });
Demo
留言