1. 程式人生 > >springMVC和ckeditor圖片上傳

springMVC和ckeditor圖片上傳

1.下載ckeditor後將資料夾放在webroot的js目錄下;

2.springmvc配置靜態檔案訪問
在web.xml中新增:

<servlet-mapping> 
<servlet-name>default</servlet-name> 
<url-pattern>*.css</url-pattern> 
</servlet-mapping> 

<servlet-mapping> 
<servlet-name>default</servlet-name> 
<url-pattern>*.gif</url-pattern> 
</servlet-mapping> 

<servlet-mapping> 
<servlet-name>default</servlet-name> 
<url-pattern>*.jpg</url-pattern> 
</servlet-mapping> 
<servlet-mapping> 
<servlet-name>default</servlet-name> 
<url-pattern>*.png</url-pattern> 
</servlet-mapping> 

<servlet-mapping> 
<servlet-name>default</servlet-name> 
<url-pattern>*.js</url-pattern> 
</servlet-mapping>
3.在springmvc-servlet.xml配置檔案中新增檔案上傳支援
<bean id="multipartResolver" 
class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> 
<property name="defaultEncoding" value="utf-8" /> 
<property name="maxUploadSize" value="10485760000" /> 
<property name="maxInMemorySize" value="40960" /> 
</bean>

4.在進行上傳的頁面中
<textarea rows="4" cols="5" name="content"></textarea>
<script type="text/javascript">CKEDITOR.replace('content',
{ 
filebrowserImageUploadUrl : 'uploadImg',
language : 'zh-cn',
} );</script>

其中filebrowserImageUploadUrl是controller的路徑

5.編寫controller

@Controller
public class FileUploadController {
/*
* 圖片命名格式
*/
private static final String DEFAULT_SUB_FOLDER_FORMAT_AUTO = "yyyyMMddHHmmss";

protected Logger logger = Logger.getLogger(FileUploadController.class);

/*
* 上傳圖片資料夾
*/
private static final String UPLOAD_PATH = "upload/img/";

/*
* 上傳圖片
*/
@RequestMapping(value = "news/uploadImg")
public void uplodaImg(@RequestParam("upload") MultipartFile file,//
HttpServletRequest request, //
HttpServletResponse response)//
{

try {
String proPath = request.getSession().getServletContext().getRealPath("/");
String proName = request.getContextPath();
String path=proName + UPLOAD_PATH;
PrintWriter out = response.getWriter();
String CKEditorFuncNum = request.getParameter("CKEditorFuncNum");
String fileName = file.getOriginalFilename();
String uploadContentType = file.getContentType();
String expandedName = "";
if (uploadContentType.equals("image/pjpeg")
|| uploadContentType.equals("image/jpeg")) {
// IE6上傳jpg圖片的headimageContentType是image/pjpeg,而IE9以及火狐上傳的jpg圖片是image/jpeg
expandedName = ".jpg";
} else if (uploadContentType.equals("image/png")
|| uploadContentType.equals("image/x-png")) {
// IE6上傳的png圖片的headimageContentType是"image/x-png"
expandedName = ".png";
} else if (uploadContentType.equals("image/gif")) {
expandedName = ".gif";
} else if (uploadContentType.equals("image/bmp")) {
expandedName = ".bmp";
} else {
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction("
+ CKEditorFuncNum + ",'',"
+ "'檔案格式不正確(必須為.jpg/.gif/.bmp/.png檔案)');");
out.println("</script>");
return;
}
if (file.getSize() > 1024 * 1024 * 2) {
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction("
+ CKEditorFuncNum + ",''," + "'檔案大小不得大於2M');");
out.println("</script>");
return;
}
DateFormat df = new SimpleDateFormat(DEFAULT_SUB_FOLDER_FORMAT_AUTO);
fileName = df.format(new Date()) + expandedName;
file.transferTo(new File(path + "/" + fileName));
// 返回"影象"選項卡並顯示圖片 request.getContextPath()為web專案名
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction("
+ CKEditorFuncNum + ",'" + "../../upload/img/" + fileName
+ "','')");
out.println("</script>");
return;
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}
}



相關推薦

springMVCckeditor圖片

1.下載ckeditor後將資料夾放在webroot的js目錄下; 2.springmvc配置靜態檔案訪問 在web.xml中新增: <servlet-mapping> <servlet-name>default</servlet-name

一個完整的springmvc + ajaxfileupload實現圖片的案例

multipart per cnblogs not his let facade func connector 一,原理 詳細原理請看這篇文章 springmvc + ajaxfileupload解決ajax不能異步上傳圖片的問題。java.lang.ClassCastEx

CKEditor圖片實現詳細步驟(使用Struts 2)

struts2 none bject parameter found contains 使用 工具 call 本人使用的CKEditor版本是4.7.0 CKEditor的編輯器工具欄中有一項“圖片域”,該工具可以貼上圖片地址來在文本編輯器中加入圖片,但是沒有圖片上傳。

C# MVC 使用 CKEditor圖片 提示“不正確的服務器響應”

cto 設置 不存在 代碼 time eat save 圖片地址 name 重點:看一下你使用的CKEditor版本 過程: 後臺需要一款富文本編輯器。經過挑選後,最後選擇了FCKEditor 的升級版 CKEditor 。在官網下載了4.10.1版本。 經過一番配置後,富

javaEE Springmvc,檔案(圖片)

需要額外匯入檔案上傳的Jar包:commons-io和commons-fileupload的Jar包 ItemController.java(Controller後端控制器,檔案上傳(接收檔案型別的引數)): package com.xxx.springmvc.c

ionic3 + springmvc/springboot + angular圖片以及渲染

伺服器端上傳圖片和查詢圖片的程式碼 @Controller @RequestMapping({"/attachment"}) @CrossOrigin // 允許跨域訪問 @PropertySource("classpath:file.properties") public class

webuploader結合SpringMVC實現多圖片(附原始碼)

本案例實現多圖片上傳並且可以在前端預覽圖片,後端使用SpringMVC框架接收檔案,文章最後附原始碼。 一、效果 ![這裡寫圖片描述](https://img-blog.csdn.net/2018082816114114?watermark/2/text/aH

SpringMVC框架實現圖片與下載

1、新建一個Maven webapp專案,引入需要用的夾包,pom.xml檔案的依賴包如下: <dependencies> <!-- 用於生成圖片的縮圖 --> <dependency> <g

Java 設定新增ckeditor圖片功能

第一步: 1.ckeditor中配置檔案 config。js /** * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved. * Fo

CKEditor圖片的PHP實現

編輯文章是網站後臺的常用功能,CKEditor是目前流行的富文字編輯器,它使用方便但要做一些配置才能實現上傳本地圖片到伺服器的功能。在參考了一篇java下CKEditor圖片上傳的博文後,我用PHP實現了CKEditor編輯文章並支援上傳本地圖片的功能。 從官網http:/

SpringMVC圖片至資料庫回顯

在登入時上傳一個圖片以及回顯。之前,需要匯入兩個jar包:commons-fileupload-1.3.1和commons-io-2.4。 Index.jsp頁面: 一定要寫 enctype="multipart/form-data",否則springmvc就會解析失敗。

SpringMVC實現FTP伺服器之圖片富文字

上傳流程為: jsp(上傳檔案)->springMVC的servlet.xml(解析成二進位制Mulitfile)->Controller->service(連線ftp,檔案打包按格式二進位制流上傳)->ftp 注:本文的程式

layui springMvc檔案圖片

1.準備工作       --:匯入整合ssm的jar包             --:匯入layui樣式檔案和js 檔案等     --:在mysql 中建立一個表 Picture,用於儲存圖片路徑,名稱等資料       --:新建一個上傳圖片的頁面layuiUpload

springmvc圖片(兼容ie8以上,實時預覽)

處理 spa aps news time htm tip 技術分享 ans html代碼: <form id="uploadform" method="post" enctype="multipart/form-data"> <

關於ajaxFileUpload圖片,successerror都觸發的情況

圖片 跨域 插件 for 函數 over type secure 輸出 最近做到項目使用JQuery的插件ajaxFileUpload~~~ 遇到了非常領人匪夷所思的事情,當圖片上傳成功之後呢(success),它的error事件也被觸發了,情況就是:   後端數據正

ASP.NET Core 簡單實現七牛圖片(FormData Base64)

private stream public 圖片 ASP.NET Core 簡單實現七牛圖片上傳(FormData 和 Base64)七牛圖片上傳 SDK(.NET 版本):https://developer.qiniu.com/kodo/sdk/1237/csharpUpoladServic

圖片封裝類【包括圖片縮略圖】.NET

tolower tdi p s else col width posted ef6 substr 原文發布時間為:2009-08-30 —— 來源於本人的百度文章 [由搬家工具導入]#region 上传图片Լ

CKEditor實現圖片,並且回調圖片路徑

js文件 文件上傳 hid class mode 兩種方法 review 重名 action CKEditor編輯器的工具欄中初始的時候應該是這樣子的,沒有圖片上傳按鈕 並且預覽中有一堆火星文,可以修改相應配置刪除它。 第一種方法:打開ckeditor/plugins/im

微信端調取相冊攝像頭,實現圖片,並到本地服務器

配置 epic 替換 pan source 工具 alert 調試 family 在微信公眾號網頁開發時,遇到了圖片上傳的問題,查看了微信的開發者文檔,裏面的資料比較全。接著我們看一下整個的流程 1、config權限配置 $.ajax({ url:‘wx_getC

springMVC圖片的處理方式

com add turn subst cor input gif格式 abs value 首先需要依賴的jar包: <dependency>   <groupId>commons-io</groupId>   <artifactI