2011年12月20日 星期二

jQuery自製upload file介面

390834_2786408589169_904970288_n

因為安全性的問題,在一般網頁要改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把瀏覽的字樣塞進去,這樣之後就可以彈性修改裡面的文字了。

最後只要把抓到的檔案路徑丟給文字欄位就好了。
  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
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...