假上傳檔案欄位[input file]製作心得

這幾天在我心中爭議許久的問題，就是在瀏覽器，做一個另外設計過的input file，
但是，html的<input type="file">，並無法去改變它的UI，即便可以，各家瀏覽器顯示<input type="file">的方式也不一樣。

• demo檔案做在這裡 : http://winsystem.zymichost.com/my_btn_tes2/

起初，我的製作想法很單純，就只是參考網路上的做法->
這種事情，我能懂個原理就很了不起了，看還要看各家瀏覽器們給不給面子....

1. 製作一個真的存在的<input type="file" name="browse" id="real_upload">，然後將他透明度設為0，或者偏移他，讓他的position設在使用者看不到的位置，(不能將這個input type="file"的display設為none，在opera跟safari 他們會當作不存在，所以無法觸發以下要做的事情 )
2. 再來製作一個<input type="text" name="file" id="fake_file_name">(一個單純的input type="text") 跟 <input type="button" id="upload_btn"  value="Select a File"> (一個單純的button)
3. 再來，使用JavaScript去控制，當使用者按下名為Select a File的 button 之後，也去觸發真正的那個input type="file"(雖然我們故意隱藏他)，然後再將真正的file的值帶到假的input欄位。

javascript code:

function DYI_uploader(){

/*

 *real means the id/css for reak file input type

 *fake means the id/css for fake text input

 *upbtn means the button

*/ 

    var $r = $('#real_upload'),

        $f = $('#fake_file_name'),

        $f_btn = $('#upload_btn');


    $f.attr('value',$r.val());


    $f_btn.click(function(){


        $r.click();  

        //when we touch fake btn,we also need lie brow
          ser let we touch the real file input

    });
    
    
    $r.change(function(){

            $f.attr('value',$r.val());

             //console.log($f.attr+""+$r.val());

            });

            
    $('form').submit(function(){

        if($f.val()!==""){

         return true;

        }else{

        return false;

         //console.log('plz select a file to upload');

        }
    })
    

}

DYI_uploader();

此作法的缺點 :

1.僅IE不支援， 並不是javascript的問題，而是IE本身基於安全性的考慮，input file必須手動去觸發click事件。

==> 解決IE不能直行自製upload button的問題，我只有兩個結論

A : 將觸發事件寫在行內，可以在IE執行，像這樣 :
    <input type="button" id="upload_btn"  
      onclick="browse.click();file.value=browse.value;browse.disabled=true" value="Select a File">
     缺點是，只能觸發一次，第二次就無法更改file的value....

B: 捨棄在IE用自製Upload file


更好的方法我還在尋找......
希望有辦法找到更完美的解決方式。

相關資料請參考: 
Google關鍵字:自製input file,input file
收藏 input file 文件上传控件隐藏后用button触发它的click事件
[jQuery]外掛特輯11:filestyle-美化input file的好幫手
將onclick寫在行內的參考來源 :
input file的CSS设定