input file上傳文件樣式支持html5的瀏覽器解決方案_HTML5教程
      
編輯Tag賺U幣
      




      

      推薦：一張圖片能隱含千言萬語之隱藏你的程序代碼
      一個HTML5的視頻智力游戲,開發的過程很有趣，我喜歡編程，但當實現了游戲邏輯后，我有了一個有趣的想法：為什么不想個辦法把代碼隱藏起來
      
最近在使用畫布處理圖像像素時用到了file上傳控件，發現了file上傳控件的兩個兼容性問題。一個是file上傳控件在火狐下無法通過css改變width，另一個是file上傳控件在不同的瀏覽器下的外觀和行為都不一樣。 
      下面是file上傳控件在IE10，firefox16，chrome22,opera12,safari5.1.7里的截圖： 
      

       
      在IE10里，雙擊輸入框或者單擊按鈕都彈出文件選擇框。在其他瀏覽器里單擊輸入框，按鈕或文字都可以觸發文件選擇框。 
      鑒于這種混亂情況，有必要要統一樣式和行為。下面是我的兼容性方案。 
      先看一下最終結果在各瀏覽器的截圖： 
      


      基本思路：創建輸入框和按鈕模擬file上傳控件。將file上傳控件設置成透明。讓file上傳控件與用于模擬的按鈕右對齊。修改元素的堆疊順序，讓按鈕處于下面，file上傳控件在中間，輸入框在上面。在文件選擇完畢后將file上傳控件里的值賦給用于模擬的輸入框。 
      原理：在不同的瀏覽器里，file上傳控件的按鈕的height都是可調的，而且file上傳控件的右側都是可以單擊的。所以通過調節file上傳控件的height，并調整file上傳控件的位置（右對齊），可以讓file上傳控件的可單擊區域與用于模擬的按鈕完全覆蓋。當file上傳控件透明時用戶單擊用于模擬的按鈕就觸發了文件選擇框。但同時file上傳控件的堆疊順序不能先于用于模擬的輸入框，不然當用戶將鼠標置于所見的輸入框上時可能會看到光標不是指示文本而是為一個箭頭（而且為一個箭頭時單擊會彈出文件選擇框），用戶將感到困惑。 
      實現：先看看html部分的代碼。 

      復制代碼 代碼如下:www.wf0088.com
       
      <div id="file"> 
      <input type="text" value="未選擇文件" /><input type="button" value="瀏覽" /><input type="file" /> 
      </div> 

      然后是css部分的代碼。 

      復制代碼 代碼如下:www.wf0088.com
       
      #file { 
      position:relative; 
      width:226px; 
      height:25px; 
      border:1px #99f solid; 
      } 
      #file input { 
      font-size:16px; 
      margin:0; 
      padding:0; 
      position:relative; 
      vertical-align:middle; 
      outline:none; 
      } 
      #file input[type="text"] { 
      border:3px none; 
      width:172px; 
      z-index:4; 
      } 
      #file input[type="button"] { 
      width:54px; 
      height:25px; 
      z-index:2; 
      } 
      #file input[type="file"] { 
      position:absolute; 
      right:0px; 
      height:25px; 
      opacity:0; 
      z-index:3; 
      } 

      最后javascript部分，用于把file上傳控件獲得的文件路徑顯示到可見的輸入框里。 

      復制代碼 代碼如下:www.wf0088.com
       
      window.onload=function(){ 
      var file=document.querySelector("#file input[type='file']"); 
      var text=document.querySelector("#file input[type='text']"); 
      file.addEventListener("change",assign,false); 
      function assign(){ 
      text.value=file.value; 
      } 
      } 

      歡迎留言交流或指正。

      

            
      分享：HTML 5 標簽、屬性、事件及瀏覽器兼容性速查表 附打包下載
      HTML 5 可以說是近十年來 Web 標準最巨大的飛躍。和以前的版本不同，HTML 5 并非僅僅用來表示 Web 內容，它的使命是將 Web 帶入一個成熟的應用平臺，在這個平臺上，視頻，音頻，圖象，動畫，以及同電腦的交互都被標準化
      


      

      



      


      來源：未知//所屬分類：HTML5教程/更新時間：2013-04-22


      

      



      


      



      相關HTML5教程：