摘要:前端部分使用主要是為了異步上傳文件,不需要開啟新的頁面進行上傳由于不能上傳文件,該文件的代碼在本篇文章的最底部由于這個文件已經很久沒用更新了,所以增加了來處理錯誤,前端代碼如下第一個中的屬性是為了限制上傳的文件屬性,其他文件可以去掉該屬性引
前端部分
使用ajaxFileUpload 主要是為了異步上傳文件,不需要開啟新的頁面進行上傳!
由于segmentfault不能上傳文件,該文件ajaxFileUpload.js的代碼在本篇文章的最底部:
由于ajaxFileUpload這個文件已經很久沒用更新了,所以增加了handleError: function( s, xhr, status, e )來處理錯誤,
前端代碼如下:
第一個input中的accept屬性是為了限制上傳的文件屬性,其他文件可以去掉該屬性
引用兩個js文件
上傳按鈕:
js代碼:
//圖片上傳 function ajaxFileUpload() { $.ajaxFileUpload({ url:"/ai/app/uploadImage",//用于文件上傳的服務器端請求地址 secureuri:false ,//一般設置為false fileElementId:"upload",//文件上傳控件的id屬性 dataType: "text",//返回值類型 一般設置為json success: function (message) //服務器成功響應處理函數 { layer.alert(message); $("#tool_icon").val(message); }, error: function (data, status, e)//服務器響應失敗處理函數 { alert(e); } }); return false; }后端部分
該項目使用的spring框架,需要配置bean,來接受上傳的文件
后端代碼
@ResponseBody @RequestMapping(value="/uploadImage",method=RequestMethod.POST) public String uploadImage(HttpServletRequest request,@RequestParam("imagefile") MultipartFile file) throws IOException{ String getOriginalFilename = null; logger.debug("文件原名: " + getOriginalFilename); logger.debug("文件名稱: " + file.getName()); logger.debug("文件長度: " + file.getSize()); logger.debug("文件類型: " + file.getContentType()); if( file.isEmpty()){ logger.error("upload image--------------------------------->failed"); return "please select a image"; } /**文件在服務器中的實際路徑*/ String realPath = request.getSession().getServletContext().getRealPath("/upload"); logger.debug("realPath---------------------------------------->"+realPath); logger.debug("getOriginalFilename----------------------------->"+file.getOriginalFilename()); /**寫入地址中*/ FileUtils.copyInputStreamToFile(file.getInputStream(), new File(realPath,file.getOriginalFilename())); /**使用原生方法*/ /* byte[] bytes = file.getBytes(); BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(new File("/ai/images/icons/toolLogo/demo.png"))); stream.write(bytes); stream.close();*/ /**返回文件在服務器中的地址,用于存儲入庫*/ String resultUrl = "/ai/upload/"+file.getOriginalFilename(); logger.debug("upload image file result----------------------->"+resultUrl); return resultUrl; }
相關jar包下載:org.apache.commons.io_1.3.2.jar org.apache.commons.fileupload.jar
相關jar包的地址
參考blog:
jQuery插件之ajaxFileUpload
http://blessht.iteye.com/blog/1405057
http://blog.csdn.net/jadyer/article/details/11693705
http://www.cnblogs.com/rollenholt/p/3693087.html
ajaxFileUpload.js 源代碼
// JavaScript Document jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = "jUploadFrame" + id; if(window.ActiveXObject) { var io = document.createElement(""); if(typeof uri== "boolean"){ io.src = "javascript:false"; } else if(typeof uri== "string"){ io.src = uri; } } else { var io = document.createElement("iframe"); io.id = frameId; io.name = frameId; } io.style.position = "absolute"; io.style.top = "-1000px"; io.style.left = "-1000px"; document.body.appendChild(io); return io; }, createUploadForm: function(id, fileElementId) { //create form var formId = "jUploadForm" + id; var fileId = "jUploadFile" + id; var form = jQuery(""); var oldElement = jQuery("#" + fileElementId); var newElement = jQuery(oldElement).clone(); jQuery(oldElement).attr("id", fileId); 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 = s.fileElementId; var form = jQuery.createUploadForm(id, s.fileElementId); var io = jQuery.createUploadIframe(id, s.secureuri); var frameId = "jUploadFrame" + id; var formId = "jUploadForm" + id; if( s.global && ! jQuery.active++ ) { // Watch for a new set of requests jQuery.event.trigger( "ajaxStart" ); } var requestDone = false; // Create the request object var xml = {}; if( s.global ) { jQuery.event.trigger("ajaxSend", [xml, s]); } var uploadCallback = function(isTimeout) { // Wait for a response to come back 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( s.success ) { // ifa local callback was specified, fire it and pass it the data s.success( data, status ); }; if( s.global ) { // Fire the global callback jQuery.event.trigger( "ajaxSuccess", [xml, s] ); }; } else { jQuery.handleError(s, xml, status); } } catch(e) { status = "error"; jQuery.handleError(s, xml, status, e); }; if( s.global ) { // The request was completed jQuery.event.trigger( "ajaxComplete", [xml, s] ); }; // Handle the global AJAX counter if(s.global && ! --jQuery.active) { jQuery.event.trigger("ajaxStop"); }; 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(){ if( !requestDone ) { // Check to see ifthe request is still happening 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) { form.encoding = "multipart/form-data"; } else { form.enctype = "multipart/form-data"; } jQuery(form).submit(); } catch(e) { jQuery.handleError(s, xml, null, e); } if(window.attachEvent){ document.getElementById(frameId).attachEvent("onload", uploadCallback); } else{ document.getElementById(frameId).addEventListener("load", uploadCallback, false); } return {abort: function () {}}; }, uploadHttpData: function( r, type ) { var data = !type; data = type == "xml" || data ? r.responseXML : r.responseText; // ifthe type is "script", eval it in global context if( type == "script" ) { jQuery.globalEval( data ); } // Get the JavaScript object, ifJSON is used. if( type == "json" ) { eval( "data = " + data ); } // evaluate scripts within html if( type == "html" ) { jQuery("
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/79644.html
摘要:前端部分使用主要是為了異步上傳文件,不需要開啟新的頁面進行上傳由于不能上傳文件,該文件的代碼在本篇文章的最底部由于這個文件已經很久沒用更新了,所以增加了來處理錯誤,前端代碼如下第一個中的屬性是為了限制上傳的文件屬性,其他文件可以去掉該屬性引 前端部分 使用ajaxFileUpload 主要是為了異步上傳文件,不需要開啟新的頁面進行上傳!由于segmentfault不能上傳文件,該文件a...
摘要:開發圖片上傳,圖片異步上傳是目前比較方便的功能這里我就不寫文件了,將代碼寫出來。 thinkphp開發圖片上傳,圖片異步上傳是目前比較方便的功能,這里我就不寫css文件了,將代碼寫出來。引入核心文件下載https://github.com/carlcarl/A...HTML下面首先在html頁面引入相關js資源 圖片上傳 接下來在body中創建相關div 封...
摘要:開發圖片上傳,圖片異步上傳是目前比較方便的功能這里我就不寫文件了,將代碼寫出來。 thinkphp開發圖片上傳,圖片異步上傳是目前比較方便的功能,這里我就不寫css文件了,將代碼寫出來。引入核心文件下載https://github.com/carlcarl/A...HTML下面首先在html頁面引入相關js資源 圖片上傳 接下來在body中創建相關div 封...
閱讀 2134·2021-11-19 09:58
閱讀 1720·2021-11-15 11:36
閱讀 2879·2019-08-30 15:54
閱讀 3400·2019-08-29 15:07
閱讀 2772·2019-08-26 11:47
閱讀 2826·2019-08-26 10:11
閱讀 2511·2019-08-23 18:22
閱讀 2761·2019-08-23 17:58