關於瀏覽器兼容問題

最近在做上傳文件前端的 jQuery，遇到瀏覽器兼容問題，上網查了一下看到網友總結很到位，具體如下：

解決思路是這樣子的：
1、首先把input=file做成透明來隱藏
2、要明確一點：用其它按鈕的click時間來觸發input=file時間是不可能的，一定會拒絕訪問
3、input=file必須被主動觸發，而不是由Js函數來被動click
4、唯一的辦法：點擊你的submit按鈕，而實際上點的是input=file的按鈕
5、所以要用Js控制透明之后的input=file絕對位置
6、曾經的一個做法是，當鼠標進入submit按鈕區域，就把input=file動態的移動到submit的位置，相當於有個透明層位於submit上方
7、此時點擊submit首先影響的是把它給擋住的input=file，然后再發生自己的點擊事件，這樣就屬於主動點擊input=file的按鈕
8、需要注意的是隱藏和坐標計算，包括焦點處理都得要妥善完成，你可以先用半透明調整好位置

 

==================================================================

參考： 自定義上傳按鈕樣式的終極解決方案_input透明法

代碼如下：

 

   

上傳圖片

    

 

給其增加樣式：

 

.div1{

float: left;

height: 41px;

background: #f5696c;

width: 144px;

position:relative;

}

.div2{

text-align:center;

padding-top:12px;

font-size:15px;

font-weight:800

}

.inputstyle{

    width: 144px;

    height: 41px;

    cursor: pointer;

    font-size: 30px;

    outline: medium none;

    position: absolute;

    filter:alpha(opacity=0);

    -moz-opacity:0;

    opacity:0; 

    left:0px;

    top: 0px;

}

 

 

   

上傳圖片

    

 

如此就可以是實現“點擊$(".div2")上傳文件”的效果了。