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插件，来完成以上动做。