好了,下面开始进入正题,散仙简单记录下,究竟该怎么使用Ajax异步上传文件,在实现的过程中,也遇到了一些小问题,总算皇天不负有心人,都一一解决,今记录在此,免后继者重蹈折。
实现这个功能,需要jquery的一个js文件,如下所示:
ajaxfileupload.js
首先,我们需要把这个包导入工程中,当然还得有Jquery的核心包,然后我们就可以使用ajax上传的功能了,代码如下:
function clickExecute(){ //提交表单 $.ajaxFileUpload( { url:'workXmlAtuo',//用于文件上传的服务器端请求的Action地址 type:"post",//请求方法 secureuri:false,//一般设置为false fileElementId:'upload',//文件id属性 <input type="file" id="upload" name="upload" /> dataType:"JSON",//返回值类型 一般设置为json,一定要大写,否则可能会出现一些bug success:function(msg) { // alert(msg.length);//从服务器返回的json中取出message中的数据,其中message为在struts2中定义的成员变量 $.each(msg,function(k,y){ $("#id").append("<option >"+y+" </option>"); }); } } ); }
散仙的后台是Struts2的Action,后台就是我们常规的一些写法,因为使用了Ajax提交,所以就没必要在前台代码里写入form表单来提交了,后台部分代码如下:
/** * 上传的文件名 * **/ public List<File> upload; private List<String> uploadFileName;//注意要与文件名一致 private List<String> uploadContentType;//文件类型一致
/*** * * 使用Gson * 把集合数据转成 * json * * **/ Gson g=new Gson(); HttpServletResponse r=ServletActionContext.getResponse(); // System.out.println("解析列:"+columns); ServletActionContext.getResponse().setCharacterEncoding("UTF-8"); ServletActionContext.getResponse().setContentType("application/json;charset=utf-8"); r.getWriter().print(g.toJson(columns));
然后,就可以正常使用了。
使用过程中,发现2个问题:
问题一,在使用ajax上传时,dataType类型,最好写成大写的JSON,散仙一开始的时候写的小写结果,发现不能正常使用,可能是一个bug。
解决办法就是把dataType的值写成大写的JSON,即可。
问题二,在json的集合数据返回到前台是,数据上莫名其妙的带了个pre的html标签,导致无法正常解析json,这个异常散仙在网上也找了一些解决办法,通常的是把后台的setContentType里面设置头部信息为text/html,经过此步,pre标签的问题是可以解决了
但是在前台的时候,仍不能正常显示,最后改了ajaxfileupload.js的源码,此问题得以解决。
解决办法如下图所示:
至此,所有问题都得到解决,最后散仙附上ajaxfileupload.js文件,希望能够对正在使用中的朋友有所帮助。
原文地址:https://www.jb51.cc/ajax/546653.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。