当前位置: 代码迷 >> Java Web开发 >> 关于jquery.form.ajaxSubmit()的浏览器兼容有关问题
  详细解决方案

关于jquery.form.ajaxSubmit()的浏览器兼容有关问题

热度:542   发布时间:2016-04-16 22:17:36.0
关于jquery.form.ajaxSubmit()的浏览器兼容问题
关于jquery.form
功能描述: 一个使用jquery.form插件做的模态窗口上传图片, 成功之后关闭模态窗口, 然后在主窗口的图片位置直接显示出所上传的图片.

引用的jquery版本是1.7.2
引用的jquery.form版本是3.5

html代码如下:

<div id="myModal" class="reveal-modal"  sytle="width:400px;height:400px">
  <form id="imgForm1"  name="imgForm"  method="post" enctype="multipart/form-data"  >
    <input id="file"  type="file" name="file"  /> <br/>
    <font color="red">请选择jpg或jpeg图片文件(1M以内)</font><br/>

</form>
<input id="imgSub" type="image" src="images/upload.jpg" onclick="submitImg();" class="my-uploadify-button"  />
<img id="upgif" src="images/011.gif" style="display:none" />
<a id="cw" class="close-reveal-modal">&#215;</a>
</div>


js代码如下:

function submitImg(){
var options = {
url : '<%=basePath%>uploadShopImg',
dataType:  'text',
type : 'POST',
success : function(text, status) {
alert("--------");
$("#shopImg").attr("src", text);
$("#cardImg").attr("value", text);
$("#cw").click();
},
error : function(request) {
alert("Connection error");
}
};
$('#imgForm1').ajaxSubmit(options);
return false;
}


action后台代码如下:

//定义一个String src 为上传后图片路径
//进行上传文件处理
this.getResponse().setContentType( "text/html; charset=utf-8" );
this.getResponse().setHeader( "Cache-Control", "no-cache" );
this.getResponse().getWriter().write( src );
this.getResponse().getWriter().flush();
this.getResponse().getWriter().close();


经过以上的程序, 在google浏览器和firefox下是可以实现该功能的, 但是在IE8浏览器下会出现以下问题(其他IE内核浏览器未作测试):
1. 模态窗口未正常关闭, 也就是success中的$("#cw").click();未被调用;
2. action返回的src(图片路径), 本应该经过success方法写入到主页面的div中, 但是却以一个新窗口的形式弹出了, 新页面的内容就是src的值;
我个人总结以上原因就是success方法未被调用导致的 .
请各位大神帮忙分析一下原因, 有哪些需要调整改动的地方. 
很急, 在线等
------解决方案--------------------
这个问题曾经困扰我好长时间,最后发现如果没有文件上传就可以正常实现各浏览器的兼容,如果有文件上传ie内核的浏览器都会出问题,就是不进入success方法,百度google已经有很多这方面的资料了,楼主没试着找找嘛?


------解决方案--------------------
给楼主提供个解决思路,首先你取下载个最新的js文件,其次提交代码这么修改下:
var options = {
url:"<%=basePath%>uploadShopImg",
dataType: 'json',
success: function(data) {
alert("--------");
                $("#shopImg").attr("src", data.text);
                $("#cardImg").attr("value", data.text);
                $("#cw").click();
}
};

  相关解决方案