java使用CKEditor實(shí)現(xiàn)圖片上傳功能
java如何使用CKEditor實(shí)現(xiàn)圖片上傳功能,具體內(nèi)容如下
1.根據(jù)實(shí)際需要下載指定的CKEditor

2.刪除文件ckeditor/plugins/image/dialogs/image.js預(yù)覽框中文本內(nèi)容,并修改hidden屬性值為顯示上傳選項(xiàng)卡


刪除image.js中包含在雙引號中的上述文本

將image.js中的hidden屬性值改為0

3.修改ckeditor/config.js文件,配置“上傳到服務(wù)器”按鈕調(diào)用的controller接口


4.“上傳到服務(wù)器”按鈕調(diào)用的controller級別的接口
@Controller
@RequestMapping("publicutil")
public class PublicUtilController {
@RequestMapping(value = "uploadImage")
private void uploadImage(HttpServletRequest request, HttpServletResponse response, HttpSession session,@RequestParam MultipartFile[] upload) {
response.setCharacterEncoding("UTF-8");
PrintWriter out=null;
try {
out = response.getWriter();
} catch (IOException e1) {
logger.error("response.getWriter()異常="+e1);
e1.printStackTrace();
}
String callback = request.getParameter("CKEditorFuncNum");
// 獲得response,request
Map<String, Object> m = new HashMap<String, Object>();
if (!ServletFileUpload.isMultipartContent(request)) {
m.put("error", 1);
m.put("message", "請選擇文件!");
//return m;
logger.info("請選擇文件!");
}
String originalFileName=null;//上傳的圖片文件名
String fileExtensionName=null;//上傳圖片的文件擴(kuò)展名
for (MultipartFile file : upload) {
if (file.getSize()> 10*1024* 1024) {
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
+ ",''," + "'文件大小不得大于10M');");
out.println("</script>");
}
originalFileName=file.getOriginalFilename();
logger.info("上傳的圖片文件名="+originalFileName);
fileExtensionName= originalFileName.substring(
originalFileName.lastIndexOf(".") ,originalFileName.length()).toLowerCase();
logger.info("圖片文件擴(kuò)展名="+fileExtensionName);
String[] imageExtensionNameArray= WebsiteConstant.IMAGE_EXTENSION_NAME_ARRAY;
String allImageExtensionName="";
boolean isContain=false;//默認(rèn)不包含上傳圖片文件擴(kuò)展名
for(int i=0;i<imageExtensionNameArray.length;i++){
if(fileExtensionName.equals(imageExtensionNameArray[i])){
isContain=true;
}
if(i==0){
allImageExtensionName+=imageExtensionNameArray[i];
}else{
allImageExtensionName+=" , "+imageExtensionNameArray[i];
}
}
String newFileName=java.util.UUID.randomUUID().toString()+fileExtensionName;
String uploadPath =WebsiteConstant.PIC_APP_FILE_SYSTEM_CKEDITOR_LOCATION;
if(isContain){//包含
File pathFile = new File(uploadPath);
if (!pathFile.exists()) { // 如果路徑不存在,創(chuàng)建
pathFile.mkdirs();
}
try {
FileUtils.copyInputStreamToFile(file.getInputStream(), new File(uploadPath ,newFileName));
// InputStream is=file.getInputStream();
// File toFile = new File(uploadPath, newFileName);
// OutputStream os = new FileOutputStream(toFile);
// byte[] buffer = new byte[1024];
// int length = 0;
// while ((length = is.read(buffer)) > 0) {
// os.write(buffer, 0, length);
// }
// is.close();
// os.close();
} catch (IOException e) {
logger.error("FileUtils.copyInputStreamToFile uploadPath="+uploadPath+" newFileName ="+newFileName+" exception="+e);
}
String imageUrl=WebsiteConstant.PIC_APP_SERVER_URL+"images/ckeditor/"+newFileName;
// 返回"圖像信息"選項(xiàng)卡并顯示圖片 ,在對應(yīng)的文本框中顯示圖片資源url
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
+ ",'" +imageUrl + "','')");
out.println("</script>");
}else{
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
+ ",''," + "'文件格式不正確(必須為"+allImageExtensionName+"文件)');");
out.println("</script>");
}
}
}
}
<span style="font-size:14px;">public class WebsiteConstant {
public static String[] IMAGE_EXTENSION_NAME_ARRAY={".jpg",".jpeg",".png",".gif",".bmp"};
public static String PIC_APP_SERVER_URL="http://localhost:8090/Picture/";
public static String PIC_APP_FILE_SYSTEM_CKEDITOR_LOCATION="/Users/abc/Documents/tomcat/webapps/Picture/images/ckeditor/";
public static final int SUCCESS = 1; // 操作成功
</span>
5.若是在Maven項(xiàng)目中使用的CKEditor,需要在pom.xml中添加如下代碼:
<dependency> <groupId>com.ckeditor</groupId> <artifactId>ckeditor-java-core</artifactId> <version>3.5.3</version> </dependency>
6.最終效果圖

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Java實(shí)現(xiàn)圖片上傳到服務(wù)器并把上傳的圖片讀取出來
- java web圖片上傳和文件上傳實(shí)例
- java通過模擬post方式提交表單實(shí)現(xiàn)圖片上傳功能實(shí)例
- Java以struts2為例介紹如何實(shí)現(xiàn)圖片上傳
- JavaWeb實(shí)現(xiàn)裁剪圖片上傳完整代碼
- Java圖片上傳實(shí)現(xiàn)代碼
- Java實(shí)現(xiàn)的圖片上傳工具類完整實(shí)例
- 微信 java 實(shí)現(xiàn)js-sdk 圖片上傳下載完整流程
- Java+mysql本地圖片上傳數(shù)據(jù)庫及下載示例
- java實(shí)現(xiàn)多圖片上傳功能
相關(guān)文章
教你Springboot如何實(shí)現(xiàn)圖片上傳
這篇文章主要介紹了教你Springboot如何實(shí)現(xiàn)圖片上傳,首先大家明白圖片上傳,需要在數(shù)據(jù)庫定義一個(gè)varchar類型的img字段圖片字段,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
spring boot線上日志級別動(dòng)態(tài)調(diào)整的配置步驟
這篇文章主要為大家介紹了spring boot線上日志級別動(dòng)態(tài)調(diào)整的配置步驟,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步2022-03-03
java調(diào)用js文件的兩種常用方法示例(支持V8引擎)
在Java中調(diào)用JavaScript的方法通常涉及到使用Java的腳本引擎,下面這篇文章主要給大家介紹了關(guān)于java調(diào)用js文件的兩種常用方法(支持V8引擎)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06
基于idea操作hbase數(shù)據(jù)庫并映射到hive表
這篇文章主要介紹了用idea操作hbase數(shù)據(jù)庫,并映射到hive,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-03-03
Geotools實(shí)現(xiàn)shape文件的寫入功能
Geotools作為開源的Java?GIS三方庫,已經(jīng)成為GIS服務(wù)器端的主流開源庫,其功能非常強(qiáng)大,涉及到GIS業(yè)務(wù)的方方面面,其中就包括GIS數(shù)據(jù)的讀寫,今天小編就借助Geotools來實(shí)現(xiàn)shape數(shù)據(jù)的寫入,需要的朋友可以參考下2023-08-08

