摘要:前端部分使用主要是為了異步上傳文件,不需要開啟新的頁面進行上傳由于不能上傳文件,該文件的代碼在本篇文章的最底部由于這個文件已經很久沒用更新了,所以增加了來處理錯誤,前端代碼如下第一個中的屬性是為了限制上傳的文件屬性,其他文件可以去掉該屬性引
前端部分
使用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("
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://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 封...
閱讀 2102·2021-11-19 09:58
閱讀 1701·2021-11-15 11:36
閱讀 2867·2019-08-30 15:54
閱讀 3386·2019-08-29 15:07
閱讀 2759·2019-08-26 11:47
閱讀 2805·2019-08-26 10:11
閱讀 2496·2019-08-23 18:22
閱讀 2744·2019-08-23 17:58