问题回顾:
1.需求:jsp页面通过<input type="file" ...>上传图片,后台对应action对图片做一些压缩,描边等处理后,将处理完的image返回到页面显示出来。
2.解决方案:采用ajaxSubmit提交,通过返回的json数据,将image填充到对应的<div>中
>>>>>>>>>>想看最终结果的直接下跳看标题5<<<<<<<<<<<<<<
遇到的几个问题:
假设<input type="file" id="upImage" name="upImage">
1.傻瓜式的认为,通过普通的ajax提交就能做到(代码如下)
$.ajax({
url:xxxx,
data:'upImage='+ $('#upImage').val(),
....
success:function(returnData){....}
})
错误点:后台得到的只是String值,并不是通过form序列化的File
2.将form 序列化以后 进行上传
$.ajax({
url:xxxx,
[color=red]data:$('#form1').formSerialize(),[/color]
....
success:function(returnData){....}
})
结果:不成功,打印了一下$('#form1').formSerialize(),发现里面没有对upImage数据,这个原因不明,希望看到这个的大神们给个解释,3Q
3.通过ajaxSubmit上传______第一步
需要的js
jquery.js
jquery.form.js
<1> js代码
$("#form1").ajaxSubmit( {
url : "previewImageDeal",
datatype : "json",
success : function(returnData){
...
},
error:function(){
alert('error');
}
});
<2>struts.xml代码
<action name="XXXX" class="XXXXXXX" method="XXXXXX">
<result name="deal" type="json">
<param name="includeProperties">dealStatus,dealMsg,dImgPath</param>
</result>
</action>
<3>java 代码
String dealStatus = null;
String dealMsg = null;
String dImgPath = null;
//图片处理
//给必要的变量赋值
js中的ajax方法,直接进的error.......无语
4.通过ajaxSubmit上传______第二步
参考网上的一些资料,在3的基础上将js中dataType:'json'去掉。strust.xml返回值类型仍然是json即<result name="deal" type="json">
>>>成功进了 success方法
随后在success中打印了返回的结果 新的问题出现了
4.1 问题:success(retrunData)的returnData被一对<pre></pre>标签包住了
应对方法 :tong过js的replace方法将<pre></pre>去掉 得到的数据是期望的json格式;进一步的通过 var jasonData = eval('('+returnData+')'); ;然后业务逻辑处理
>>>在firfox下调试成功
转战ie.chrmo,新的问题又出现了
4.2 问题:在IE、Chrmo中都提示 是否下载“XXXXXXXXXXX” ,打开一看,是返回的json数据,我表示很无语
应对方法:上网查各种资料 。。。。。。。。没有一个完全匹配遇到的这个问题,但是,通 过网上的讨论可以定位问题所在
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
之所以会出现下载,是因为struts中对json的理解是 application/json ,而ajaxSubmit是提交的表单(虽然只需要对表单中的file处理),对应的action对表单数据处理之后通过struts.xml的重定向,<result name="success" type="json">导致了提示“下载json”
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
5.通过ajaxSubmit上传______第三步
吐血应对方法,参考了网上各家资料,最后终于跑通了,中间的曲解就不记录了,只记录一下对的东西,写到这里我想起了一句话,“遇到问题的时候是求助于前辈们,还是自己查资料解决”,此时我感觉自己查资料印象更深刻,所以希望看到的朋友们,遇到问题的时候千万不要不假思索的就去问别人,找人帮忙写代码,解决问题的过程能让自己对一些东西有更深层次的理解,这个在求助于别人的时候是得不到。
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
5.1 java中关键代码
private JSONObject returnData = null;
//这个到底有没有用,还不知道,有点疲劳,不想做实验了
response.setContentType("text/xml;charset=utf-8");
//将返回结果保存到map中,然后转成json
Map<String, String> map = new HashMap<String, String>();
map.put();
map.put();
map.put();
returnData = JSONObject.fromObject(map);//转JSON
response.getWriter().print(returnData );//打印
5.2 xml关键部分
<action name="xxxx"class="xxx" method="XXX" >
<result name="deal" type="json">
<param name="contentType">text/html</param>
<param name="includeProperties">returnData</param>
</result>
</action>
5.3 js关键部分
[color=red]说明:java中通过print打印了想要的json结果,struts.xml中又通过includeProperties强行收留了returnData,所以在js的success方法中会看到两个json结果块。为什么要includeProperties呢,因为不加includeProperties标签或者加空标签(<param name="includeProperties"></param>)会得到一大大大大堆不想要的结果,看着就烦,而且还消耗系统和网络资源[/color]
$("#form1").ajaxSubmit( {
url : "action名字",
// datatype : "json",//彻底注释掉
success : function(returnData){
returnData = returnData.substring(0,returnData.indexOf('}')+1);//只要print的json结果
var isWindow = false;
//window系统路径是"\" 要进行转换 linux不需要转换
if(returnData.indexOf('\\\\') >= 0){
isWindow = true;
//将路径中的"\"替换,不然parseJSON会出错
returnData = returnData.replace(/\\\\/g,'_');
}
var jsonData = jQuery.parseJSON(returnData);
if(jsonData.dealStatus == '0'){
//错误处理
alert(jsonData.dealMsg);
$('#upImage').val('');
$('#previewTR').css({"height":"0px"});
$('#previewDiv').html('');
}else{
//成功处理图片
var tempImagPath = jsonData.previewImagePath ;
var finalImagePath = jsonData.finalImagePath ;
if(isWindow){//window系统将"_"再转换成"/"
tempImagPath = tempImagPath.replace(/_/g,'/');
finalImagePath = finalImagePath.replace(/_/g,'\\');
}
$('#finalImagePath').val(finalImagePath);
$('#previewTR').css({"height":jsonData.previewHeight+'px'});
$('#previewDiv').html('<img src=\"'+tempImagPath+'\" />' );
}
}
});
分享到:
相关推荐
Ajax-jquery-ajaxSubmit.zip,使用ajax和json轻松提交表单。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的...
ajaxSubmit上传文件IE解析
ajaxSubmit多文件上传用的包
使用ajaxSubmit文件实现多文件的异步上传,包含部分代码及用到的js、css等文件
jquery ajaxSubmit提交所用到的jquery.form.js 和jquery-1.4.2.min.js
ajaxSubmit 提交使用的文件,解决form提交后导致重复提交数据问题
主要介绍了解决IE下AjaxSubmit上传文件提示下载文件问题,需要的朋友可以参考下
代码比较简陋,只是为了演示使用ajaxSubmit异步上传图片及保存数据,请海含! (参考文献://www.jb51.net/shouce/jquery/jquery_api/Plugins/Form/ajaxSubmit.html) 一:web (add.jsp) 代码如下: <%@page ...
该方法封装了上传的功能,使得前后端接口对接变的更简单
【Demo Project】ajaxSubmit+Servlet表单文件上传和下载 博客:http://www.cnblogs.com/zhangyuejia/p/8532200.html
实现Ajax无刷新技术上传图片,可以上传多张图片,有预览功能
之前在网上查了各种方法,想要提交file文件,还要能接收返回值。推荐使用ajaxSubmit()方法。 网上的推荐多是这种: $(#formId).submit( $(this).ajaxSubmit({ url:..., type:..., success:function(){ ... ...
博文链接:https://xyc20080413.iteye.com/blog/2010554
jQuery(form).ajaxSubmit({ url: "ajaxsub.aspx?abc=test", type: "post", dataType: "json", success: data }); 分析:JQuery的AJAX提交,会将要提交的数据进行编码,使用encodeURIComponent在js中处理数据。因此,...
.ajaxSubmit方式提交所需要的 jquery-migrate-1.2.1.js 和 ajax.js
ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件。如下所示: 代码如下:[removed][removed][removed][removed] 那么,如何通过ajaxSubmit(obj)提交数据呢?首先...
最近使用ajaxform有点频繁,今天小编抽时间给大家记录下有关jquery中的ajaxSubmit使用讲解的知识,非常不错,感兴趣的朋友参考下吧
网上很多ajaxSubmit局部刷新的例子,很多没有附带jquery-form.js的下载链接 该例子实现文件上传ajaxSubmit提交局部刷新页面返回结果 不能选0分 所以给1分