springmvcajax文件|ajaxfileupload+springmvc上传多文件的control怎么写

Ⅰ spring mvc上传怎么用ajax

准备工作:前端引入:1、jquery，我在这里用的是：jquery-1.10.2.min.js 2、ajaxfileupload.js这里可能会报一些错，所以在json判断那里修改为（网上也有）：Js代码 if ( type == "json" ){ data = r.responseText; var start = data.indexOf(">"); if(start != -1) { var end = data.indexOf("<", start + 1); if(end != -1) { data = data.substring(start + 1, end); } } eval( "data = " + data ); } 末尾那里补充一段：Js代码 handleError: function( s, xhr, status, e ) { if ( s.error ) { s.error.call( s.context || window, xhr, status, e ); } if ( s.global ) { (s.context ? jQuery(s.context) : jQuery.event).trigger ( "ajaxError", [xhr, s, e] ); } } 后台导入spring的jar包，我这里用的是：spring3.0.5在spring.xml里配置如下：Xml代码 <!– SpringMVC上传文件时，需要配置MultipartResolver处理器 –> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="defaultEncoding" value="UTF-8"/> <!– 指定所上传文件的总大小不能超过200KB。注意maxUploadSize属性的限制不是针对单个文件，而是所有文件的容量之和 –> <!– 不在这里限制了,后台各自进行限制了 <property name="maxUploadSize" value="2000000"/> –> </bean> <!– SpringMVC在超出上传文件限制时，会抛出org.springframework.web.multipart. –> <!– 该异常是SpringMVC在检查上传的文件信息时抛出来的，而且此时还没有进入到Controller方法中 –> <bean id="exceptionResolver" class="org.springframework.web.servlet.handler."> <property name="exceptionMappings"> <props> <!– 遇到异常时，跳转到/page/html/errorGolbal.html页面 –> <prop key="org.springframework.web.multipart.">/page/html/errorGolbal.html</prop> </props> </property> </bean> 这里就充分利用框架的便利性帮你都做好了，如果你不在xml里配置这些，那么在controller那里，request.getInputStream()得到的这个流不全是文件流，还包含了其他，需要你自己编码去解析，当然，要解析的话还要知道http相关报文解析知识，所以这里可以充分利用框架的便利性，有兴趣的可以研究下好了，准备工作做好了，看下前端的具体代码：Html代码 <div id="fileUpLoad" class="manage"> 添附文件 <!– 自定义 <input type="file"/> –> <input type="file" id="btnFile" name="btnFile" onchange="txtFoo.value=this.value;com.company.project.services.newCase.fileUpLoad()" hidden="hidden" /> <input type="text" id="txtFoo" readonly="readonly" style="width: 300px" /> <button onclick="btnFile.click()" style="height: 25px;">选择文件</button> </div> js代码为：Js代码 if (!window.com) { window.com = {}; } if (!window.com.company) { window.com.company= {}; } if (!window.com.company.project) { window.com.company.project= {}; } if (!window.com.company.project.services) { window.com.company.project.services = {}; } if (!window.com.company.project.services.newCase) { window.com.company.project.services.newCase = {}; } //生成随机guid数(参考网上) com.company.project.services.newCase.getGuidGenerator = function() { var S4 = function() { return (((1+Math.random())*0x10000)|0).toString(16).substring(1); }; return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4()); }; //上传文件 com.company.project.services.newCase.fileUpLoad = function(){ var fileName = $("#btnFile").val();//文件名 fileName = fileName.split("\\"); fileName = fileName[fileName.length-1]; var guid = com.company.project.services.newCase.getGuidGenerator();//唯一标识guid var data = {guid:guid}; jQuery.ajaxSettings.traditional = true; $.ajaxFileUpload({ url : '/PROJECT/function.do?method=fileUpLoad', secureuri : false,//安全协议 fileElementId:'btnFile',//id type : 'POST', dataType : 'json', data:data, async : false, error : function(data,status,e) { alert('Operate Failed!'); }, success : function(json) { if (json.resultFlag==false){ alert(json.resultMessage); }else{ alert('文件上传成功!'); var next = $("#fileUpLoad").html(); $("#fileUpLoad").html("<div id='"+guid+"'>"+"文件:"+fileName+" <a href='#' onclick='com.company.project.services.newCase.filedelete("+"\""+guid+"\""+","+"\""+fileName+"\""+")'>删除</a>"+"<br/></div>"); $("#fileUpLoad").append(next); } } }); }; //文件删除 com.company.project.services.newCase.filedelete = function(guid,fileName){ jQuery.ajaxSettings.traditional = true; var data = {guid:guid,fileName:fileName}; $.ajax({ url : '/PROJECT/function.do?method=filedelete', type : 'POST', dataType : 'json', data:data, async : false, error : function() { alert('Operate Failed!'); }, success : function(json) { if (json.resultFlag==false){ alert(json.resultMessage); }else{ alert('删除成功!'); $("#"+guid).remove(); } } }); }; ———————————————————————————-注：如果你对ajax不熟悉，或者由于浏览器等原因，致使上述方式提交出现各种问题，那么你可以用form表单形式提交,代码片段如下：Html代码 <div id="fileUpLoad" class="manage"> <form id="needHide" action="/工程/function.do?method=fileUpLoad" method="post" enctype="multipart/form-data" target = "hidden_frame"> <!– 自定义 <input type="file"/> –> <input type="file" id="btnFile" name="btnFile" onchange="txtFoo.value=this.value;com.company.project.services.newCase.fileUpLoad()" hidden="hidden"/> </form> 添附文件 <input type="text" id="txtFoo" readonly="readonly" style="width: 300px" /> <button onclick="btnFile.click()" style="height: 25px;">选择文件</button> <iframe name='hidden_frame' id="hidden_frame" style='display: none' onload="com.company.project.services.newCase.statusCheck()"></iframe> </div> js代码写为:Js代码 var flag = true; com.company.project.services.newCase.statusCheck = function(){ if(flag == false){ var status = hidden_frame.window.document.getElementById("hideForm").innerHTML; console.log(status); } flag = false; }; //上传文件 com.company.project.services.newCase.fileUpLoad = function(){ $("#needHide").submit(); } 后台代码主要在最后变为:java代码 PrintWriter printWriter = response.getWriter(); printWriter.write("<div id='hideForm'>1111</div>"); ———————————————————————————-后台对应java代码段为：Java代码 @RequestMapping(params = "method=fileUpLoad") //btnFile对应页面的name属性 public void fileUpLoad(@RequestParam MultipartFile[] btnFile, HttpServletRequest request, HttpServletResponse response){ try{ //文件类型:btnFile[0].getContentType() //文件名称:btnFile[0].getName() if(btnFile[0].getSize()>Integer.MAX_VALUE){//文件长度 OutputUtil.jsonArrOutPut(response, JSONArray.fromObject("上传文件过大!")); } InputStream is = btnFile[0].getInputStream();//多文件也适用,我这里就一个文件 //String fileName = request.getParameter("fileName"); String guid = request.getParameter("guid"); byte[] b = new byte[(int)btnFile[0].getSize()]; int read = 0; int i = 0; while((read=is.read())!=-1){ b[i] = (byte) read; i++; } is.close(); OutputStream os = new FileOutputStream(new File("D://"+guid+"."+btnFile[0].getOriginalFilename()));//文件原名,如a.txt os.write(b); os.flush(); os.close(); OutputUtil.jsonOutPut(response, null); }catch (Exception e) { OutputUtil.errorOutPut(response, "系统异常"); } } @RequestMapping(params = "method=filedelete") public void filedelete(HttpServletRequest request, HttpServletResponse response){ try{ String guid = request.getParameter("guid"); String fileName = request.getParameter("fileName"); File file = new File("D://"+guid+"."+fileName); boolean isDeleted = file.delete(); if(!isDeleted){ OutputUtil.errorOutPut(response, "文件删除失败"); } OutputUtil.jsonArrOutPut(response, null); }catch (Exception e) { OutputUtil.errorOutPut(response, "系统异常"); } } 另外：如果是图片上传的话，你也可以不保存在什么临时目录，可以用base64进行编解码，网上也有很多，简单介绍下：后台只要这么做：Java代码 //得到byte数组后 BASE64Encoder base64e = new BASE64Encoder(); JSONArray ja = new JSONArray(); String base64Str = base64e.encode(b); ja.add(base64Str); OutputUtil.jsonArrOutPut(response, JSONArray.fromObject(ja)); 前台页面只要这么就可以拿到了：Html代码 $("#fileUpLoad") .append("<image src='"+"data:image/gif;base64,"+json.resultMessage[0]+"' >"); 对于json相关不大了解的可以参考我的博文:http://quarterlifeforjava.iteye.com/blog/2024336效果和iteye的相似：补充：如果要让表单提交后还是留在当前页面，除了Ajax还可以用iframe，代码如下：其实关键就是iframe和form中的target

Ⅱ spring mvc ajax怎么返回json字符串

你从页面中使用ajax请求一个controller方法，然后此方法返回了一个json字符串，是吗？如果是，那么你在页面中定义的ajax方法请求返回解析成各种数据格式，是json, text, xml之类呃呃。如果是text，你需要的却是json对象，那么可以使用jQuery的$.parseJSON()方法把回调函数中的参数转成json对象，如果你只是想看下这个text，直接alert即可，如果你请求的返回就是JSON，那么只能当做json对象使用，而不能打印它的字符串。json对象的使用类似于java对象的使用，也是 . 操作符，例如jsonobject.key

Ⅲ springmvc+ajax上传图片的问题。传过去的是空值.怎么接收图片

因为SpringMVC只有GET请求才能通过方法上加参数获取到值，POST是不能通过这种方式获取的，可以通过request.getParameter(key) 或者 封装成对象（属性对应前端参数）会自动填充。另外我记得Ajax上传文件不能直接用$.ajax这种方式传，我的方法如下：var form = new FormData();var xhr = new XMLHttpRequest();xhr.open("post", "url", true);xhr.onload = function () {alert("上传完成!");};xhr.send(form);

Ⅳ 求解Spring mvc 文件上传采用jquery插件 AjaxFileUpload.js 出现的一些问题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>checkbox</title> <script src="js/jquery-1.3.2.js" type="text/javascript"></script> <script src="js/1.js" type="text/javascript"></script> </head> <body> <table id="table1"> <tr> <td><input type="checkbox" value="1"/>1</td> <td id="k_1"><input type="text" name="student" id="s_1" readonly="true"/></td> </tr> <tr> <td><input type="checkbox" value="2"/>2</td> <td id="k_2"><input type="text" name="student" id="s_2" readonly="true"/></td> </tr> <tr> <td><input type="checkbox" value="3"/>3</td> <td id="k_3"><input type="text" name="student" id="s_3" readonly="true"/></td> </tr> <tr> <td><input type="checkbox" value="4"/>4</td> <td id="k_4"><input type="text" name="student" id="s_4" readonly="true"/></td> </tr> </table> </body> </html> ————————————————————- $(document).ready(function() { $("td[id^='k_']").hide(); var check = $(":checkbox"); //得到所有被选中的checkbox var actor_config; //定义变量 check.each(function(i){ actor_config = $(this); actor_config.click( function(){ if($(this).attr("checked")==true){ $("#k_"+$(this).val()).show(); }else{ $("#k_"+$(this).val()).hide(); } } ); }); });

Ⅳ springmvc怎么接受ajax发送过来的文件

你文件上传用的什么方式如果是submit直接提交的需要给form加一个属性：enctype="multipart/form-data"如果是异步提交则需要看你的上传控件的ID是否正确

Ⅵ ajaxfileupload+springmvc上传多文件的control怎么写

1.Spring mvc a.xml配置：[html] view plain print?<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" > <!– set the max upload size1MB 1048576 –> <property name="maxUploadSize"> <value>52428800</value> </property> <property name="maxInMemorySize"> <value>2048</value> </property> </bean> b. 服务器端接收解析[java] view plain print? public void imgUpload( MultipartHttpServletRequest multipartRequest, HttpServletResponse response) throws Exception { response.setContentType("text/html;charset=UTF-8"); Map<String, Object> result = new HashMap<String, Object>(); //获取多个file for (Iterator it = multipartRequest.getFileNames(); it.hasNext();) { String key = (String) it.next(); MultipartFile imgFile = multipartRequest.getFile(key); if (imgFile.getOriginalFilename().length() > 0) { String fileName = imgFile.getOriginalFilename(); //改成自己的对象哦！ Object obj = new Object(); //Constant.UPLOAD_GOODIMG_URL 是一个配置文件路径 try { String uploadFileUrl = multipartRequest.getSession().getServletContext().getRealPath(Constant.UPLOAD_GOODIMG_URL); File _apkFile = saveFileFromInputStream(imgFile.getInputStream(), uploadFileUrl, fileName); if (_apkFile.exists()) { FileInputStream fis = new FileInputStream(_apkFile); } else throw new FileNotFoundException("apk write failed:" + fileName); List list = new ArrayList(); //将obj文件对象添加到list list.add(obj); result.put("success", true); } catch (Exception e) { result.put("success", false); e.printStackTrace(); } } } String json = new Gson().toJson(result, new TypeToken<Map<String, Object>>() { }.getType()); response.getWriter().print(json); } //保存文件 private File saveFileFromInputStream(InputStream stream, String path, String filename) throws IOException { File file = new File(path + "/" + filename); FileOutputStream fs = new FileOutputStream(file); byte[] buffer = new byte[1024 * 1024]; int bytesum = 0; int byteread = 0; while ((byteread = stream.read(buffer)) != -1) { bytesum += byteread; fs.write(buffer, 0, byteread); fs.flush(); } fs.close(); stream.close(); return file; } 2.关于前端代码a.修改ajaxfileupload.js 先到官网下载该插件. 将源文件的createUploadForm的代码替换如下：[javascript] view plain print?createUploadForm: function(id, fileElementId, data) { //create form var formId = 'jUploadForm' + id; var fileId = 'jUploadFile' + id; var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>'); if (data) { for ( var i in data) { jQuery( '<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form); } } for (var i = 0; i < fileElementId.length; i ++) { var oldElement = jQuery('#' + fileElementId[i]); var newElement = jQuery(oldElement).clone(); jQuery(oldElement).attr('id', fileElementId[i]); jQuery(oldElement).attr('name', fileElementId[i]); jQuery(oldElement).before(newElement); jQuery(oldElement).appendTo(form); } //set attributes jQuery(form).css('position', 'absolute'); jQuery(form).css('top', '-1200px'); jQuery(form).css('left', '-1200px'); jQuery(form).appendTo('body'); return form; } 第一步高定b. 页面代码 html：[html] view plain print?<input type="button" value="添加附件" onclick="createInput('more');" /> <div id="more"></div> js：这里可以专门写封装类，以及给file加onchange事件判断文件格式。由于时间有限，未修改[javascript] view plain print?var count = 1; /** * 生成多附件上传框 */ function createInput(parentId){ count++; var str = '<div name="div" ><font style="font-size:12px;">附件</font>'+ ' '+ '<input type="file" contentEditable="false" id="uploads' + count + '' + '" name="uploads'+ count +'" value="" style="width: 220px"/><input type="button" value="删除" onclick="removeInput(event)" />'+'</div>'; document.getElementById(parentId).insertAdjacentHTML("beforeEnd",str); } /** * 删除多附件删除框 */ function removeInput(evt, parentId){ var el = evt.target == null ? evt.srcElement : evt.target; var div = el.parentNode; var cont = document.getElementById(parentId); if(cont.removeChild(div) == null){ return false; } return true; } 下面是2个修改多file用的js，用于显示和删除，可以于上面的合并精简代码：[javascript] view plain print?function addOldFile(data){ var str = '<div name="div' + data.name + '" ><a href="#" style="text-decoration:none;font-size:12px;color:red;" onclick="removeOldFile(event,' + data.id + ')">删除</a>'+ ' ' + data.name + '</div>'; document.getElementById('oldImg').innerHTML += str; } function removeOldFile(evt, id){ //前端隐藏域，用来确定哪些file被删除，这里需要前端有个隐藏域 $("#imgIds").val($("#imgIds").val()=="" ? id :($("#imgIds").val() + "," + id)); var el = evt.target == null ? evt.srcElement : evt.target; var div = el.parentNode; var cont = document.getElementById('oldImg'); if(cont.removeChild(div) == null){ return false; } return true; } ajax上传文件:[javascript] view plain print?function ajaxFileUploadImg(id){ //获取file的全部id var uplist = $("input[name^=uploads]"); var arrId = []; for (var i=0; i< uplist.length; i++){ if(uplist[i].value){ arrId[i] = uplist[i].id; } } $.ajaxFileUpload({ url:'xxxxx', secureuri:false, fileElementId: arrId, //这里不在是以前的id了，要写成数组的形式哦！ dataType: 'json', data: { //需要传输的数据 }, success: function (data){ }, error: function(data){ } }); }