关于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">×</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();
}
};