JQuery与springmvc实现多个文件上传操作
2013-11-26 14:34
507 查看
1. 导入JQuery相关JS文件
<script src="<@full_path path="js/jquery.js"/>" type="text/javascript"></script>
<script src="<@full_path path="js/ajaxfileupload.js"/>" type="text/javascript"></script>
这边ajaxfileupload.js有点特殊,请使用如下改造后的原文件内容:
2. 相关页面调用例子。(需引入相关JS)
3。 后台相关JAVA代码
另:请注意,以上方法在同一个域项目中才可以正常使用。如果页面是通过部署在两个项目并且分属不同域中的话,则无法正常使用AJAX实现的。
<script src="<@full_path path="js/jquery.js"/>" type="text/javascript"></script>
<script src="<@full_path path="js/ajaxfileupload.js"/>" type="text/javascript"></script>
这边ajaxfileupload.js有点特殊,请使用如下改造后的原文件内容:
jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' + id; var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"'; if(window.ActiveXObject) { if(typeof uri== 'boolean'){ iframeHtml += ' src="' + 'javascript:false' + '"'; } else if(typeof uri== 'string'){ iframeHtml += ' src="' + uri + '"'; } } iframeHtml += ' />'; jQuery(iframeHtml).appendTo(document.body); return jQuery('#' + frameId).get(0); }, 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; }, ajaxFileUpload: function(s) { // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout s = jQuery.extend({}, jQuery.ajaxSettings, s); var id = new Date().getTime() var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data)); var io = jQuery.createUploadIframe(id, s.secureuri); var frameId = 'jUploadFrame' + id; var formId = 'jUploadForm' + id; // Watch for a new set of requests if ( s.global && ! jQuery.active++ ) { jQuery.event.trigger( "ajaxStart" ); } var requestDone = false; // Create the request object var xml = {} if ( s.global ) jQuery.event.trigger("ajaxSend", [xml, s]); // Wait for a response to come back var uploadCallback = function(isTimeout) { var io = document.getElementById(frameId); try { if(io.contentWindow) { xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null; xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document; }else if(io.contentDocument) { xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null; xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document; } }catch(e) { jQuery.handleError(s, xml, null, e); } if ( xml || isTimeout == "timeout") { requestDone = true; var status; try { status = isTimeout != "timeout" ? "success" : "error"; // Make sure that the request was successful or notmodified if ( status != "error" ) { // process the data (runs the xml through httpData regardless of callback) var data = jQuery.uploadHttpData( xml, s.dataType ); // If a local callback was specified, fire it and pass it the data if ( s.success ) s.success( data, status ); // Fire the global callback if( s.global ) jQuery.event.trigger( "ajaxSuccess", [xml, s] ); } else jQuery.handleError(s, xml, status); } catch(e) { status = "error"; jQuery.handleError(s, xml, status, e); } // The request was completed if( s.global ) jQuery.event.trigger( "ajaxComplete", [xml, s] ); // Handle the global AJAX counter if ( s.global && ! --jQuery.active ) jQuery.event.trigger( "ajaxStop" ); // Process result if ( s.complete ) s.complete(xml, status); jQuery(io).unbind() setTimeout(function() { try { jQuery(io).remove(); jQuery(form).remove(); } catch(e) { jQuery.handleError(s, xml, null, e); } }, 100) xml = null } } // Timeout checker if ( s.timeout > 0 ) { setTimeout(function(){ // Check to see if the request is still happening if( !requestDone ) uploadCallback( "timeout" ); }, s.timeout); } try { var form = jQuery('#' + formId); jQuery(form).attr('action', s.url); jQuery(form).attr('method', 'POST'); jQuery(form).attr('target', frameId); if(form.encoding) { jQuery(form).attr('encoding', 'multipart/form-data'); } else { jQuery(form).attr('enctype', 'multipart/form-data'); } jQuery(form).submit(); } catch(e) { jQuery.handleError(s, xml, null, e); } jQuery('#' + frameId).load(uploadCallback ); return {abort: function () {}}; }, uploadHttpData: function( r, type ) { alert("type is " + type); var data = !type; alert("data1 is " + data); data = type == "xml" || data ? r.responseXML : r.responseText; // If the type is "script", eval it in global context if ( type == "script" ) jQuery.globalEval( data ); // Get the JavaScript object, if JSON is used. if ( type == "json" ) { alert("in json,data is " + data); eval( "data = " + data ); } // evaluate scripts within html if ( type == "html" ) jQuery("<div>").html(data).evalScripts(); return data; } })
2. 相关页面调用例子。(需引入相关JS)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>导入数据应用</title> <#include "/views/head.html"/> <script> function test() { var baseUrl = "<@full_path path="/"/>"; var arrId = []; arrId[0] = "appExcel"; arrId[1] = "zipFile"; alert("arrId[0] is " + arrId[0] + ",arrId[1] is " + arrId[1]); $.ajaxFileUpload ( { url:baseUrl + 'app/test', //你处理上传文件的服务端 secureuri:false, fileElementId:arrId, dataType: 'json', success: function (data, status) { alert("is success. status is " + status); alert("in success data is " + data.desc); }, error: function (data, status, e) { alert("is error. status is " + status + ",and e is " + e); } } ); } function commitInput(){ var zipFile = document.getElementById("zipFile"); var appExcel = document.getElementById("appExcel"); var zipValue=zipFile.value; var appExcelValue=appExcel.value; var zipflag=false; var appExcelflag=false; var zipCheck = document.getElementById("zip"); if(appExcelValue != "" && appExcelValue != null){ var format = appExcelValue.substr(appExcelValue.lastIndexOf(".")); if(format==".xls" || format==".csv" || format == ".xlsx"){ document.getElementById("appExcelInfo").innerHTML=""; appExcelflag=true; }else{ document.getElementById("appExcelInfo").innerHTML="上传的格式不对"; } } if(zipCheck.checked==true){ if(zipValue != "" && zipValue != null){ if(zipValue.substr(zipValue.lastIndexOf("."))==".zip"){ document.getElementById("zipInfo").innerHTML=""; zipflag=true; }else{ document.getElementById("zipInfo").innerHTML="上传的格式不对"; } } if(zipflag&&appExcelflag){ //$.jBox.close(true); //window.parent.closeBatchApp(); setTimeout("window.parent.closeBatchApp()",100); } return zipflag&&appExcelflag; } if(appExcelflag){ setTimeout("window.parent.closeBatchApp()",100); //window.parent.closeBatchApp(); //return true; } //window.parent.closeBatchApp(); alert(appExcelflag); return appExcelflag; } function showZip(){ var zipDiv = document.getElementById("showZipInput"); var zipCheck = document.getElementById("zip"); var isUploadIconValue = document.getElementById("isUploadIcon"); if(zipCheck.checked==true){ zipDiv.style.display="block"; isUploadIconValue.value="true"; }else{ zipDiv.style.display="none"; isUploadIconValue.value="false"; } } </script> </head> <body style="font-size:12px;"> <form method="post" name="listForm" id="listForm" action="<@full_path path='app/batchImportApps'/>" enctype="multipart/form-data" onsubmit="return commitInput();"> <#--onclick="return commitInput();"--> <div style="margin-left:10%; margin-top:20%;"> <table> <tr><td align="right"><b style="font-size:14px;">csv或xls的文件:</b><input type="file" id="appExcel" name="appExcel"/><span id="appExcelInfo" style="color:red"></span><input type="checkbox" id="zip" onclick = "showZip();" /><label for="zip"><b style="font-size:14px;">上传zip文件</b></label></td></tr> <tr><td aling="center" ><div style="display:none;margin-left:11%;" id="showZipInput"><b style="font-size:14px;">zip文件:</b><input type="file" id="zipFile" name="zipFile"/><span id="zipInfo" style="color:red"></span></div></td></tr> <tr><td colspan=2 align="center"><input type="hidden" id="isUploadIcon" name="isUploadIcon" value="false"></td></tr> </table> </div> <div style="margin-left:33%;"> <input type="submit" value="确认上传" /> <input type="button" value="test" onclick="test()"/> <input type="reset" value="重置"/> </div> </form> </body> </html>
3。 后台相关JAVA代码
@RequestMapping(value = "/test", method = RequestMethod.POST) public void test(MultipartHttpServletRequest multipartRequest,HttpServletResponse response,HttpServletRequest request) { System.err.println("1234"); InputStream appExcelStream = null; try { 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(); System.err.println("filename is " + fileName); OutputStream out = new FileOutputStream(new File("d://" + fileName)); out.write(imgFile.getBytes()); out.close(); } } response.setContentType("text/html;charset=UTF-8"); PrintWriter out1 = response.getWriter(); FileUploadResp res = new FileUploadResp(); res.setResult(0); res.setDesc("success."); out1.write(JSONObject.fromObject(res).toString()); } catch (IOException e) { log.error("in batchImportApps,inputstream is null."); } } public static class FileUploadResp { private int result; private String desc; public int getResult() { return result; } public void setResult(int result) { this.result = result; } public String getDesc() { return desc; } public void setDesc(String desc) { this.desc = desc; } }
另:请注意,以上方法在同一个域项目中才可以正常使用。如果页面是通过部署在两个项目并且分属不同域中的话,则无法正常使用AJAX实现的。
相关文章推荐
- JQuery与springmvc实现单个文件上传操作
- jquery插件ajaxupload实现文件上传操作
- jquery插件ajaxupload实现文件上传操作
- 文件上传前端操作-增加文件与删除文件按钮(jquery实现)
- jquery-ajax+springMVC实现文件上传
- 使用SpringMVC配合jQuery文件上传插件ssi-uploader实现多图片可预览上传
- 详解springMVC两种方式实现多文件上传及效率比较
- 在SpringMVC框架中实现文件上传和下载
- PHP服务器文件管理器开发小结(十):使用jQuery和iframe实现AJAX文件上传
- springMVC实现多文件上传
- SpringMVC实现文件上传和下载功能
- 一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子
- SpringMVC实现文件的上传和下载
- springMVC实现文件的上传和下载
- springMVC两种方式实现多文件上传及效率比较
- Spring SpringMVC使用MultipartFile实现文件的上传
- java操作hdfs,实现文件上传、下载以及查看当前文件夹下所有文件
- springMVC两种方式实现多文件上传及效率比较
- jquery easy UI + Spring MVC(注解) 完成文件上传操作
- springMVC两种方式实现多文件上传及效率比较