畢業設計(十七)---發表文章(3)之- 使用ckeditor上傳圖片(flash)
阿新 • • 發佈：2019-02-06
在發表文章的時候,經常會使用到圖片, ckeditor本身提供了這個功能,需要開啟,然後再加上自己一些程式碼.
(上傳flash和上傳圖片的方式一模一樣,以圖片為例.)
先看效果圖:
先瀏覽伺服器:
點選圖片即選擇
上傳:
上傳完畢點選確定
影象大小可調節.
實現方式:
一: a: 有關的檔案, 在ckeditor檔案下新增uploader資料夾,
裡面的browse.jsp檔案是瀏覽伺服器時候的頁面. upload.jsp是點選上傳時候進行處理的檔案,
但是這裡我並沒有用到upload.jsp,因為我把其中處理的方法寫到了 自己定義的類裡面,所以upload.jsp可有可無.
b:上傳處理的類
裡面的內容其實就是upload.jsp的改寫.
二:首先修改自定義的ckeditor_config.js 檔案,在裡面加上瀏覽伺服器和上傳圖片的處理方法
CKEDITOR.editorConfig = function( config ) { config.filebrowserImageUploadUrl = 'actionckeditor.action';//定義圖片上傳的地址, 是上圖的CkeditorUploadAction.java. config.filebrowserImageBrowseUrl = 'ckeditor/uploader/browse.jsp?type=images'; //定義圖片的 瀏覽伺服器 視窗. config.filebrowserFlashUploadUrl = 'actionckeditor.action';//定義flash上傳的地址, 是上圖的CkeditorUploadAction.java. config.filebrowserFlashBrowseUrl = 'ckeditor/uploader/browse.jsp?type=Flashs';//定義flash的 瀏覽伺服器視窗 //************************************************************** config.language = 'zh-cn'; config.filebrowserWindowWidth = '440'; config.filebrowserWindowHeight = '500'; //........省略了後面的內容.. };
三:browse.jsp 程式碼
<%@page import="java.io.File"%> <%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <title>圖片瀏覽</title> <script type="text/javascript"> //這段函式是重點，不然不能和CKEditor互動了 function funCallback(funcNum,fileUrl){ var parentWindow = ( window.parent == window ) ? window.opener : window.parent; parentWindow.CKEDITOR.tools.callFunction(funcNum, fileUrl); window.close(); } </script> </head> <body> <% String path = request.getContextPath() + "/"; String type = ""; if(request.getParameter("type") != null)//獲取檔案分類 type = request.getParameter("type").toLowerCase() + "/"; String clientPath = "ckeditor/uploader/upload/" + type; File root = new File(request.getSession().getServletContext().getRealPath(clientPath)); if(!root.exists()){ root.mkdirs(); } String callback = request.getParameter("CKEditorFuncNum"); File[] files = root.listFiles(); if(files.length > 0){ for(File file:files ) { String src = path + clientPath + file.getName(); out.println("<img width='110px' height='70px' src='" + src + "' alt='" + file.getName() + "' onclick=\"funCallback("+callback+",'"+ src +"')\">"); } }else{ out.println("<h3>未檢測到資源。</h3>"); } %> </body> </html>
四: struts.xml定義action , class指向類CkeditorUploadAction.java
<action name="actionckeditor" class="ActionCkeditor" >
</action>
CkeditorUploadAction程式碼:
@Component("ActionCkeditor")
@Scope("prototype")
public class CkeditorUploadAction extends ActionSupport {
private String uploadContentType;
private String uploadFileName;
private String CKEditorFuncNum;
private String CKEditor;
private String langCode;
private File upload;
//....省略set get 方法
@Override
public String execute() throws Exception {
String strUrl="";
String strPath = ServletActionContext.getServletContext().getRealPath("ckeditor/uploader/upload");
File path = new File(strPath);
if(!path.exists()){
path.mkdirs();
}
String uuid = UUID.randomUUID().toString();
String rt[] = this.getUploadFileName().split("\\.");
System.out.println(rt[1]);
uploadFileName = new String(uuid+"."+rt[1]);//解決上傳中文圖片、flash或含中文路徑時伺服器報錯的問題。
String type =null;
if("jpg".equals(rt[1]) ||"png".equals(rt[1]) ||"gif".equals(rt[1]) ||"jpeg".equals(rt[1]) ||"bmp".equals(rt[1]))
{
type = "images/";
}
if("swf".equals(rt[1]))
{
type="flashs/";
}
String str = strPath + File.separator +type;
File file = new File(str);
if(!file.exists()){
file.mkdirs();
}
System.out.println(this.upload);
InputStream is = new FileInputStream(this.upload);
OutputStream os = new FileOutputStream(new File(strPath + File.separator +type+ this.uploadFileName));
try {
int len;
byte[] buffer = new byte[1024];
while ((len=is.read(buffer)) > 0) {
os.write(buffer,0,len);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
if(is!=null){
is.close();
}
if(os!=null){
os.close();
}
}
PrintWriter out = ServletActionContext.getResponse().getWriter();
//返回給ckeditor
strUrl=strPath+ "\\" + this.uploadFileName ;
strUrl= strUrl.replace('\\', '/');//這裡如果不替換，會出錯！！！
// System.out.println(strUrl);
out.write("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("+this.CKEditorFuncNum+", 'ckeditor/uploader/upload/"
+ type
+ this.uploadFileName
+ "', '');</script>");
return Action.NONE;
}
}五:這裡就做完了. 路徑:是
