jquery form插件 异步提交表单,无法进入action

battier 发布于 2013/08/02 11:21
阅读 1K+
收藏 0

这是一个什么情况,我单独测试,都正常,嵌入到实际页面上,就进不了action了,各位同仁,请指教 !

补:单独测试正常:

1、JSP


<script type="text/javascript"> 
		  var showResponse = function(data){
		     if("true"==data[0].resultFlag){
		         jQuery("#tipDiv").html(data[0].filePath);  
		         jQuery("#showImage").html("<img src='<%=basePath%>"+data[0].filePath+"' onclick='' style='cursor: hand;' width='223px' height='113px'/>");  
		     }else{
		        jQuery("#tipDiv").html(data[0].resultMsg);
		     }
		  }
		  var showError = function(data){
		     jQuery("#tipDiv").html(data[0].resultMsg);  
		  }
		  function uploadImage() {  
		   $(document).ready( function() {  
		                        var options = {  
		                            target : '#tipDiv',
		                            url : "platform/uploadFile.action",  
		                            type : "POST",  
		                            dataType : "json",  
		                            success : showResponse,
		                            error:showError ,
		                            timeout: 3000    
		                        };  
		                        $("#form2").ajaxSubmit(options);  
		                        return false;  
		                    });  
		  }  
		
        </script>
<center>
  <form id="form2" method="post" enctype="multipart/form-data">
    <table width="400" border="1" cellspacing="1" cellpadding="10">
	<tr>
	  <td height="25">浏览图片:</td>
	  <td><input id="fileupload" name="fileupload" type="file" />
		<div id="tipDiv"></div>
	  </td>
	</tr>
	<tr>
	  <td colspan="2" align="center">
	      <input type="button" class="right-button02" onclick="uploadImage()" value="上传" />
	  </td>
	</tr>
     </table>
  </form>
   <br>
   图片预览
  <div id="showImage"></div>
</center>
2、action测试没问题


3、页面效果:

-------------------------------以上是正常测试,以下是异常代码部分-------------------------------------------

1、jsp

<script type="text/javascript">
         var showResponse = function(data){
		     if("true"==data[0].resultFlag){
		         alert("success");
		         jQuery("#picTip").html(data[0].filePath);  
		         //jQuery("#showImage").html("<img src='<%=basePath%>"+data[0].filePath+"' onclick='' style='cursor: hand;' width='223px' height='113px'/>");  //获取父窗口的元素
		         jQuery("#singleRespPicImage").attr("src","<%=basePath%>"+data[0].filePath);
		     }else{
		        jQuery("#picTip").html(data[0].resultMsg);
		     }
		  }
		  var showError = function(data){
		     alert('error');
		     jQuery("#picTip").html(data[0].resultMsg);  
		  }
		 
		 function asynchUploadPic(obj){
		    jQuery(document).ready( function() { 
		                        var options = {  
		                            target : '#picTip',
		                            url : "platform/uploadFile.action",  
		                            type : "POST",  
		                            dataType : "json",  
		                            success : showResponse,
		                            error:showError,
		                            timeout: 3000      //限制请求的时间,当请求大于3秒后,跳出请求
		                        };  
		                       // jQuery("#singleResponsePicForm").ajaxSubmit(options);
		                        jQuery("#singleResponsePicForm").ajaxForm(options);
		                        return false;  
		                    });  
		 }
		 
		 function uploadPic(){   
		     singleResponsePicForm.fileupload.click();    
		 }   
	    </script>
<div class="singleRespPic">
															   <div id="singleRespPicUpload"  style="width:223px;height:113px;border:1px red solid;">
															      <input type="image" src="<%=basePath%>images/uploadpic.jpg" onclick="uploadPic()" id="singleRespPicImage"/>    
															   </div>
																<span
																	style="text-align: right; color: #DBDBDB; margin-left: 110px;" id="picTip">(建议720X400像素)</span>
																<form name="singleResponsePicForm" method="post" id="singleResponsePicForm" enctype="multipart/form-data">   
																	<input id="fileupload" name="fileupload" type="file" style="display:none; width:0%;height:0%;" onchange="asynchUploadPic(this);"/> 
																</form>	
															</div>
2、页面效果

3、action一致

简单业务逻辑说明:单击如上图选择对应文件,触发异步提交表单函数,进行异步上传,json返回上传图片地址及文件名,进行无刷新暂示。


---------------------

在FF环境下测试正常,在IE环境下异常,该如何处理浏览器之间的差异?



加载中
0
今夜吴眠

问题描述的不是很清楚。

代码补上?

单独测试是如何测试的?

今夜吴眠
那就很怪异了,这看起来与浏览器没什么关系, 继续关注。
battier
battier
回复 @今夜吴眠 : 你说的那些调试手段我都知道,并且都测试,现在问题已经定位,在ff下测试正常,在IE下测试异常。
今夜吴眠
使用DEBUG调式,来确认是否进入到了action的代码中。 如果没有,一般有3种原因: 1:你的action配置没配置好. 2:你的URL写的不对。 3:上传的格式不正确(你的问题应该不会有这个问题)。
battier
battier
已经补上了代码,谢谢!
0
囚兔
囚兔
看你url是相对地址,可能两次测试url地址上下文不一致,试试绝对地址,或使用浏览器分析工具看下请求url
battier
battier
在ff上测试了下,居然正常。请问是否清楚如何处理浏览器之间的差异?
0
云想衣裳花想容
云想衣裳花想容

action木有问题那么逻辑就是对的。你的这句话估计是你问题的所在platform/uploadFile.action....  这是想当路径,绝对路径呢?http://localhost:8080,你自己的这个我估计没有活动到,所以就这样的了。

battier
battier
platform 为namespace 所以有这么一层
0
囚兔
囚兔
这个插件我用过,可以兼容各大浏览器的,可能还是url的问题,写绝对地址试试吧
battier
battier
绝对地址也试了。在IE8下就是没有用。在FF下正常
返回顶部
顶部