form ajaxSubmit 上传 excel 文件问题
摘要 前端页面上传 excel 文件到后台解析后，将数据传送到前端页面进行 展示。上传文件用 jquery-form.js 中的 ajaxSubmit ，在此过程中遇到的 一些问题，将解决的方法记录下来，希望对以后有同样问题的朋友们有所 帮助。如果有什么不对的地方请斧正。

用 input

file ，但浏览器自带的选择文件 A 按钮很难看，与整体的页面风 格不合，于是自己写了一个 B 按钮，将 A 按钮用 opacity:0 隐藏于 B 之外。 然后为 B 按钮附上一个事件，当点击 B 时， B 去触发 A 的点击事件，从而 达到点击上传选择文件事件。再由 A 去触发 ajaxSubmit 事件。看似这个 问题就这样被解决了。当提交测试时，浏览器兼容问题暴露出来了。主要 是 IE9 版本以下，不允许这样的访问，报 SCRIPT5: 拒绝访问。 没办法得换成将 A 隐藏于 B 之上，当点击 B 时，实际是点的 A 。这样又带 来了一个新问题：当移动到按钮上时，鼠标显示的是箭头，而不是手型， 也没有鼠标移动上的效果。因为 A 覆盖了 B 的属性。给 A 加上 cursor:poi nter 样式， IE 和火狐都认可，但谷歌不认可。幸好 input file 后面还有一 个“未选择任何文件”的文本 C 。将 C 偏移将到 B 上，这时 B 按钮上的手 型出来了，几个浏览器都 OK，但又出现三个问题： 1. IE10 以下版本选择文件后，后端解析后返回到前端， IE 出现打开、保存 和取消按钮，就像下载一样。post 返回的报文体是 map ，将其转换成 s tring 主 OK 了

2. 3. A 按钮偏移了，IE 上当把鼠标移动到其上是还是显示的手型。解决办法， 另写一个 div 去覆盖那部分。 4. 5. 鼠标移动到上面时，没有变色效果。解决办法：给 input file 标签添加 o nMouseOver 和 onMouseOut 事件去改变 B 的颜色。 6. 以上全是文字描述，以下贴出部分代码： 页面代码 <div class="col-md-3" style="margin: 40px -150px;"> <a href="javascript:void(0)" class="btn" id="emp_files" style="m argin: 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-ind ex: 9;"> <!-- 此 div 是为了解决下面 input 多出的区域 --> 浏览添加 1 </div> <div> <input type="file" name="uploadfile" id="fileIpt" onMouseOver

="mouseOver();" onMouseOut="mouseOut();" style="cursor: poin ter; width:184px;height: 31px; margin:-31px 0px 0px 0px; opacit y: 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 插件，来完成以上动作。