ajaxSumit上传文件.doc

  1. 1、本文档共10页,可阅读全部内容。
  2. 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
ajaxSumit上传文件

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:pointer样式,IE和火狐都认可,但谷歌不认可。幸好input file后面还有一个“未选择任何文件”的文本C。将C偏移将到B上,这时B按钮上的手型出来了,几个浏览器都OK,但又出现三个问题: IE10以下版本选择文件后,后端解析后返回到前端,IE出现打开、保存和取消按钮,就像下载一样。post返回的报文体是map,将其转换成string主OK了 A按钮偏移了,IE上当把鼠标移动到其上是还是显示的手型。解决办法,另写一个div去覆盖那部分。 鼠标移动到上面时,没有变色效果。解决办法:给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插件,来完成以上动作。

文档评论(0)

wst34008 + 关注
实名认证
内容提供者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档