form ajaxSubmit上傳excel文件問題

用input file，但瀏覽器自帶的選擇文件A按鈕很難看，與總體的頁面風格不合，因而本身寫了一個B按鈕，將A按鈕用opacity:0隱藏於B以外。而後爲B按鈕附上一個事件，當點擊B時，B去觸發A的點擊事件，從而達到點擊上傳選擇文件事件。再由A去觸發ajaxSubmit事件。看似這個問題就這樣被解決了。當提交測試時，瀏覽器兼容問題暴露出來了。主要是IE9版本如下，不容許這樣的訪問，報SCRIPT5:拒絕訪問。

沒辦法得換成將A隱藏於B之上，當點擊B時，實際是點的A。這樣又帶來了一個新問題：當移動到按鈕上時，鼠標顯示的是箭頭，而不是手型，也沒有鼠標移動上的效果。由於A覆蓋了B的屬性。給A加上cursor:pointer樣式，IE和火狐都承認，但谷歌不承認。幸虧input file後面還有一個「未選擇任何文件」的文本C。將C偏移將到B上，這時B按鈕上的手型出來了，幾個瀏覽器都OK，但又出現三個問題：

1. IE10如下版本選擇文件後，後端解析後返回到前端，IE出現打開、保存和取消按鈕，就像下載同樣。post返回的報文體是map，將其轉換成string主OK了

2. A按鈕偏移了，IE上當把鼠標移動到其上是仍是顯示的手型。解決辦法，另寫一個div去覆蓋那部分。

3. 鼠標移動到上面時，沒有變色效果。解決辦法：給input file標籤添加onMouseOver和onMouseOut事件去改變B的顏色。

以上全是文字描述，如下貼出部分代碼：

頁面代碼

<div class="col-md-3" style="margin: 40px -150px;">
 <a href="javascript:void(0)" class="btn" id="emp_files" style="margin: 0px 0px 0px 100px;">
  <span class="emp-button-name">瀏覽添加</span>       
 </a>
 <div style="opacity: 0;width: 100px;height: 31px;margin: -31px 0px 0px 0px;cursor:default;font-size: 21px;position: absolute;z-index: 9;">
  <!-- 此div是爲了解決下面input多出的區域 --> 瀏覽添加1 
 </div>
 <div>
  <input type="file" name="uploadfile" id="fileIpt" onMouseOver="mouseOver();" onMouseOut="mouseOut();" style="cursor: pointer; width:184px;height: 31px; margin:-31px 0px 0px 0px; opacity: 0;font-size: 21px;position: absolute; z-index: 2;">
 </div> 
</div>

js代碼

function mouseOver(){
 $("#emp_files").addClass("but-orange");//更改B的顏色
}
function mouseOut(){
 $("#emp_files").removeClass("but-orange");
}

$("#signupForm").ajaxSubmit({//提交文件
   type:"post",
   dataType:"json",
   url:"collectFee/uploadFile",
   contentType: 'application/json;charset=UTF-8',
   success:function(ret){｝

｝);

其實，能夠用ajaxfileupload.js插件，來完成以上動做。