1. 程式人生 > >Fckeditor中使用圖片上傳

Fckeditor中使用圖片上傳

今天在做專案又碰到Fckeditor上傳圖片,於是花了點時間把這個功能實現了。

Fckeditor的使用方法之前已經介紹過了,不知道的可以看我之前的文章:

Fckeditor使用檔案上傳:

1.把相關jar包新增到專案中

所需jar包為下圖的5個jar包,其中第三個為Fckeditor的核心包,全名應該叫fckeditor-java-core-2.4.jar


2.把配置檔案fckeditor.properties放在classpath根目錄中(src資料夾下)。

fckeditor.properties的內容:

connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl

3.在web.xml中配置一個接收上傳檔案的 ConnectorServlet
<servlet>
	<servlet-name>Connector</servlet-name>
	<servlet-class>com.grace.mycrm.util.ConnectorServlet</servlet-class>
	<load-on-startup>1</load-on-startup>
</servlet>
   
<servlet-mapping> 
	<servlet-name>Connector</servlet-name>
	<url-pattern>/fckeditor/editor/filemanager/connectors/*</url-pattern>
</servlet-mapping>

關聯的servlet-class如下

package com.grace.mycrm.util;

/*
 * FCKeditor - The text editor for Internet - http://www.fckeditor.net
 * Copyright (C) 2003-2008 Frederico Caldeira Knabben
 * 
 * == BEGIN LICENSE ==
 * 
 * Licensed under the terms of any of the following licenses at your
 * choice:
 * 
 *  - GNU General Public License Version 2 or later (the "GPL")
 *    http://www.gnu.org/licenses/gpl.html
 * 
 *  - GNU Lesser General Public License Version 2.1 or later (the "LGPL")
 *    http://www.gnu.org/licenses/lgpl.html
 * 
 *  - Mozilla Public License Version 1.1 or later (the "MPL")
 *    http://www.mozilla.org/MPL/MPL-1.1.html
 * 
 * == END LICENSE ==
 */

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;
import java.util.UUID;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.fckeditor.connector.Messages;
import net.fckeditor.handlers.CommandHandler;
import net.fckeditor.handlers.ConnectorHandler;
import net.fckeditor.handlers.ExtensionsHandler;
import net.fckeditor.handlers.RequestCycleHandler;
import net.fckeditor.handlers.ResourceTypeHandler;
import net.fckeditor.response.UploadResponse;
import net.fckeditor.response.XmlResponse;
import net.fckeditor.tool.Utils;
import net.fckeditor.tool.UtilsFile;
import net.fckeditor.tool.UtilsResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.io.FilenameUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

/**
 * Servlet to upload and browse files.<br />
 * 
 * This servlet accepts 4 commands which interact with the server-side filesystem.<br />
 * The allowed commands are:
 * <ul>
 * <li><code>GetFolders</code>: Retrieves a list of folders in the current folder</li>
 * <li><code>GetFoldersAndFiles</code>: Retrives a list of files and folders in the current
 * folder</li>
 * <li><code>CreateFolder</code>: Creates a new folder in the current folder</li>
 * <li><code>FileUpload</code>: Stores an uploaded file into the current folder. (must be sent
 * with POST)</li>
 * </ul>
 * 
 * @version $Id: ConnectorServlet.java 2101 2008-06-22 22:00:48Z mosipov $
 */
public class ConnectorServlet extends HttpServlet {
	
	private static final long serialVersionUID = -5742008970929377161L;
	private static final Logger logger = LoggerFactory.getLogger(ConnectorServlet.class);

	/**
	 * Initialize the servlet: <code>mkdir</code> <DefaultUserFilesPath>
	 */
	public void init() throws ServletException, IllegalArgumentException {
		String realDefaultUserFilesPath = getServletContext().getRealPath(
				ConnectorHandler.getDefaultUserFilesPath());

		File defaultUserFilesDir = new File(realDefaultUserFilesPath);
		UtilsFile.checkDirAndCreate(defaultUserFilesDir);

		logger.info("ConnectorServlet successfully initialized!");
	}

	/**
	 * Manage the <code>GET</code> requests (<code>GetFolders</code>,
	 * <code>GetFoldersAndFiles</code>, <code>CreateFolder</code>).<br/>
	 * 
	 * The servlet accepts commands sent in the following format:<br/>
	 * <code>connector?Command=<CommandName>&Type=<ResourceType>&CurrentFolder=<FolderPath></code>
	 * <p>
	 * It executes the commands and then returns the result to the client in XML format.
	 * </p>
	 */
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		logger.debug("Entering ConnectorServlet#doGet");

		response.setCharacterEncoding("UTF-8");
		response.setContentType("application/xml; charset=UTF-8");
		response.setHeader("Cache-Control", "no-cache");
		PrintWriter out = response.getWriter();

		String commandStr = request.getParameter("Command");
		String typeStr = request.getParameter("Type");
		String currentFolderStr = request.getParameter("CurrentFolder");
		// 解決中文亂碼問題
		currentFolderStr = new String(currentFolderStr.getBytes("iso8859-1"), "utf-8");

		logger.debug("Parameter Command: {}", commandStr);
		logger.debug("Parameter Type: {}", typeStr);
		logger.debug("Parameter CurrentFolder: {}", currentFolderStr);

		XmlResponse xr;

		if (!RequestCycleHandler.isEnabledForFileBrowsing(request))
			xr = new XmlResponse(XmlResponse.EN_ERROR, Messages.NOT_AUTHORIZED_FOR_BROWSING);
		else if (!CommandHandler.isValidForGet(commandStr))
			xr = new XmlResponse(XmlResponse.EN_ERROR, Messages.INVALID_COMMAND);
		else if (typeStr != null && !ResourceTypeHandler.isValid(typeStr))
			xr = new XmlResponse(XmlResponse.EN_ERROR, Messages.INVALID_TYPE);
		else if (!UtilsFile.isValidPath(currentFolderStr))
			xr = new XmlResponse(XmlResponse.EN_ERROR, Messages.INVALID_CURRENT_FOLDER);
		else {
			CommandHandler command = CommandHandler.getCommand(commandStr);
			ResourceTypeHandler resourceType = ResourceTypeHandler.getDefaultResourceType(typeStr);

			String typeDirPath = null;
			if ("File".equals(typeStr)) {
				// 檔案所存放的路徑為 ${application.path}/WEB-INF/userfiles/
				typeDirPath = getServletContext().getRealPath("WEB-INF/userfiles/");
			}
			else {
				String typePath = UtilsFile.constructServerSidePath(request, resourceType);
				 typeDirPath = getServletContext().getRealPath(typePath);
			}
			
			File typeDir = new File(typeDirPath);
			UtilsFile.checkDirAndCreate(typeDir);

			File currentDir = new File(typeDir, currentFolderStr);

			if (!currentDir.exists())
				xr = new XmlResponse(XmlResponse.EN_INVALID_FOLDER_NAME);
			else {

				xr = new XmlResponse(command, resourceType, currentFolderStr, UtilsResponse
						.constructResponseUrl(request, resourceType, currentFolderStr, true,
								ConnectorHandler.isFullUrl()));

				if (command.equals(CommandHandler.GET_FOLDERS))
					xr.setFolders(currentDir);
				else if (command.equals(CommandHandler.GET_FOLDERS_AND_FILES))
					xr.setFoldersAndFiles(currentDir);
				else if (command.equals(CommandHandler.CREATE_FOLDER)) {

					String tempStr = request.getParameter("NewFolderName");
					tempStr = new String(tempStr.getBytes("iso8859-1"), "UTF-8");

					String newFolderStr = UtilsFile.sanitizeFolderName(tempStr);
					logger.debug("Parameter NewFolderName: {}", newFolderStr);

					File newFolder = new File(currentDir, newFolderStr);
					int errorNumber = XmlResponse.EN_UKNOWN;

					if (newFolder.exists())
						errorNumber = XmlResponse.EN_ALREADY_EXISTS;
					else {
						try {
							errorNumber = (newFolder.mkdir()) ? XmlResponse.EN_OK
									: XmlResponse.EN_INVALID_FOLDER_NAME;
						} catch (SecurityException e) {
							errorNumber = XmlResponse.EN_SECURITY_ERROR;
						}
					}
					xr.setError(errorNumber);
				}
			}
		}

		out.print(xr);
		out.flush();
		out.close();
		logger.debug("Exiting ConnectorServlet#doGet");
	}

	/**
	 * Manage the <code>POST</code> requests (<code>FileUpload</code>).<br />
	 * 
	 * The servlet accepts commands sent in the following format:<br />
	 * <code>connector?Command=<FileUpload>&Type=<ResourceType>&CurrentFolder=<FolderPath></code>
	 * with the file in the <code>POST</code> body.<br />
	 * <br>
	 * It stores an uploaded file (renames a file if another exists with the same name) and then
	 * returns the JavaScript callback.
	 */
	@SuppressWarnings("unchecked")
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		logger.debug("Entering Connector#doPost");

		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/html; charset=UTF-8");
		response.setHeader("Cache-Control", "no-cache");
		PrintWriter out = response.getWriter();

		String commandStr = request.getParameter("Command");
		String typeStr = request.getParameter("Type");
		String currentFolderStr = request.getParameter("CurrentFolder");

		logger.debug("Parameter Command: {}", commandStr);
		logger.debug("Parameter Type: {}", typeStr);
		logger.debug("Parameter CurrentFolder: {}", currentFolderStr);

		UploadResponse ur;

		// if this is a QuickUpload request, 'commandStr' and 'currentFolderStr'
		// are empty
		if (Utils.isEmpty(commandStr) && Utils.isEmpty(currentFolderStr)) {
			commandStr = "QuickUpload";
			currentFolderStr = "/";
		}

		if (!RequestCycleHandler.isEnabledForFileUpload(request))
			ur = new UploadResponse(UploadResponse.SC_SECURITY_ERROR, null, null,
					Messages.NOT_AUTHORIZED_FOR_UPLOAD);
		else if (!CommandHandler.isValidForPost(commandStr))
			ur = new UploadResponse(UploadResponse.SC_ERROR, null, null, Messages.INVALID_COMMAND);
		else if (typeStr != null && !ResourceTypeHandler.isValid(typeStr))
			ur = new UploadResponse(UploadResponse.SC_ERROR, null, null, Messages.INVALID_TYPE);
		else if (!UtilsFile.isValidPath(currentFolderStr))
			ur = UploadResponse.UR_INVALID_CURRENT_FOLDER;
		else {
			ResourceTypeHandler resourceType = ResourceTypeHandler.getDefaultResourceType(typeStr);

			String typeDirPath = null;
			if ("File".equals(typeStr)) {
				// 檔案所存放的路徑為 ${application.path}/WEB-INF/userfiles/
				typeDirPath = getServletContext().getRealPath("WEB-INF/userfiles/");
			}
			else {
				String typePath = UtilsFile.constructServerSidePath(request, resourceType);
				typeDirPath = getServletContext().getRealPath(typePath);
			}
			
			File typeDir = new File(typeDirPath);
			UtilsFile.checkDirAndCreate(typeDir);

			File currentDir = new File(typeDir, currentFolderStr);

			if (!currentDir.exists())
				ur = UploadResponse.UR_INVALID_CURRENT_FOLDER;
			else {

				String newFilename = null;
				FileItemFactory factory = new DiskFileItemFactory();
				ServletFileUpload upload = new ServletFileUpload(factory);

				upload.setHeaderEncoding("UTF-8");

				try {

					List<FileItem> items = upload.parseRequest(request);

					// We upload only one file at the same time
					FileItem uplFile = items.get(0);
					String rawName = UtilsFile.sanitizeFileName(uplFile.getName());
					String filename = FilenameUtils.getName(rawName);
					String baseName = FilenameUtils.removeExtension(filename);
					String extension = FilenameUtils.getExtension(filename);

					// 如果這個檔案的副檔名不允許上傳
					if (!ExtensionsHandler.isAllowed(resourceType, extension)) {
						ur = new UploadResponse(UploadResponse.SC_INVALID_EXTENSION);
					}

					// 如果檔案大小超出限制
					else if (uplFile.getSize() > 1024 * 1024 * 3) {
						// 傳遞一個自定義的錯誤碼
						ur = new UploadResponse(204);
					}

					// 如果不存在以上情況, 則 儲存檔案
					else {

						// construct an unique file name

						// 使用 UUID 做為檔名, 並放到按照日期生成的資料夾中
						filename = UUID.randomUUID().toString() + "." + extension;
						filename = makeFileName(currentDir.getPath(), filename); 
						File pathToSave = new File(currentDir, filename);

						int counter = 1;
						while (pathToSave.exists()) {
							newFilename = baseName.concat("(").concat(String.valueOf(counter))
									.concat(")").concat(".").concat(extension);
							pathToSave = new File(currentDir, newFilename);
							counter++;
						}

						if (Utils.isEmpty(newFilename))
							ur = new UploadResponse(UploadResponse.SC_OK, UtilsResponse
									.constructResponseUrl(request, resourceType, currentFolderStr,
											true, ConnectorHandler.isFullUrl()).concat(filename));
						else
							ur = new UploadResponse(UploadResponse.SC_RENAMED,
									UtilsResponse.constructResponseUrl(request, resourceType,
											currentFolderStr, true, ConnectorHandler.isFullUrl())
											.concat(newFilename), newFilename);

						// secure image check
						if (resourceType.equals(ResourceTypeHandler.IMAGE)
								&& ConnectorHandler.isSecureImageUploads()) {
							if (UtilsFile.isImage(uplFile.getInputStream()))
								uplFile.write(pathToSave);
							else {
								uplFile.delete();
								ur = new UploadResponse(UploadResponse.SC_INVALID_EXTENSION);
							}
						}
						else
							uplFile.write(pathToSave);

					}
				} catch (Exception e) {
					ur = new UploadResponse(UploadResponse.SC_SECURITY_ERROR);
				}
			}

		}

		out.print(ur);
		out.flush();
		out.close();

		logger.debug("Exiting Connector#doPost");
	}

	/**
	 * 
	 */
	private static SimpleDateFormat sdf = new SimpleDateFormat("yyyy/MM/dd");

	public static String makeFileName(String basePath, String filename) {
		String subPath = sdf.format(new Date());

		File dir = new File(basePath + "/" + subPath);
		// 如果目錄不存在, 就遞迴的建立, 已存在則不會重新建立
		if (!dir.exists()) {
			if (!dir.mkdirs()) {
				throw new IllegalStateException("建立目錄失敗:" + dir.getPath());
			}
		}

		String uuid = UUID.randomUUID().toString();
		String extension = FilenameUtils.getExtension(filename);
		return subPath + "/" + uuid + "." + extension;
	}

}


如果專案使用了strust2的過濾器,需要將
<filter>
	<filter-name>struts2</filter-name>
	<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>

<filter-mapping>
       <filter-name>struts2</filter-name>
       <url-pattern>/*</url-pattern>
</filter-mapping>

中的filter-mapping進行更改,否則Fckeditor在上傳圖片時會被攔截,顯示沒有許可權。

<filter-mapping>
    <filter-name>struts2</filter-name>
    <url-pattern>*.action</url-pattern>
</filter-mapping>
<filter-mapping>
    <filter-name>struts2</filter-name>
    <url-pattern>*.do</url-pattern>
</filter-mapping>
<filter-mapping>
    <filter-name>struts2</filter-name>
    <url-pattern>*.jsp</url-pattern>
</filter-mapping>
<filter-mapping>
    <filter-name>struts2</filter-name>
    <url-pattern>*.js</url-pattern>
</filter-mapping>
不過此處只有當你的這個專案的struts2中配置了副檔名才可以使用,否則就需要用其他的方法,來讓struts2過濾器不過濾fckeditor上傳圖片。


相關推薦

關於如何去除fckeditor圖片對話方塊的連結和高階兩個選項(轉帖)

 今天老闆要求修改一個網站後臺的編輯器,原因是原來的編輯老出問題,不好用。於是我就找了個現在很流行的fckedior來作為後臺的編輯器。    在做的過程中我碰到一個配置問題,上google上google搞了很久才成功。這個配置就是把圖片上傳對話方塊中的瀏覽器伺服器中的檔案功

如何解決markdown圖片的問題

github上 雲筆記 github ogl markdown weibo hub gif 解決 1.第一種方式(圖床) 1.1 google中的插件-新浪微博圖床 2.第二種方式,操作流程如下 2.1 下載一個有道雲筆記客戶端 2.2 然後把圖片通過有道雲筆記分享出來

小程式圖片

前端小程式:wxml <!--huitianxia/view/attend/attend/attend.wxml--> <import src="/huitianxia/view/common/foot.wxml"/> <view class='wrappe

tp5圖片介面

1:移動端頁面:2:表單:重點圖片的uploadFile()事件<div id="approve_NI">    <div class="approve_NI_top">        <div class="approve_NI_top2"&g

通過Fckeditor圖片到獨立圖片伺服器的方法

我大概思考了下有如下幾種方法可以解決: 1.在圖片伺服器上開通FTP,人為新增圖片地址即可,但不方便,特別是在可視編輯器中看圖還的多一部操作. 2.在圖片伺服器上開通FTP,並提高IIS執行dosShell訪問ftp,但是不安全. 3.在圖片伺服器上開通IIS,WEB後臺直接訪問(還是存在在編輯器中不方便檢視

Fckeditor使用圖片

今天在做專案又碰到Fckeditor上傳圖片,於是花了點時間把這個功能實現了。 Fckeditor的使用方法之前已經介紹過了,不知道的可以看我之前的文章: Fckeditor使用檔案上傳: 1.把相關jar包新增到專案中 所需jar包為下圖的5個jar包,其中第三個為F

Android簡單實現將手機圖片到server

sdk etc mov 創建 ast bmi 以及 lena ews 在本例中。將會簡單的實現安卓手機將圖片上傳到server中。本例使用到了 server端:PHP+APACHE 客戶端:JAVA 先簡單實現一下server端的上傳並測試上傳

ssm項目KindEditor的圖片插件,瀏覽器兼容性問題

技術 個人觀點 瀏覽器兼容 type 瀏覽器兼容性 char json字符串 註解 問題 解決辦法: 原因:使用@ResponseBody註解返回java對象,在瀏覽器中是Content-Type:application/json;charset=UTF-8 我們需要返回字

【原創】MVC項目使用JQuery的upladify圖片插件相關問題的解決方案

ack pty let protect 失效 wid min fun adding 一. 關於Uploadify Uploadify是一個jQuery插件,你可以很容易的為你的網站添加多個文件上傳功能。有兩個不同的版本(HTML5和Flash)允許你靈活選擇為您的網站和回

在vue專案實現註冊時改變頭像,同時實現將圖片的伺服器端

 一.如何實現在註冊時點選頭像時實現更改圖片的操作      1.將img和input[type="file"]放在同一個div中,利用絕對定位,讓兩者擁有相同的大小,將input的預設樣式變為透明,讓img覆蓋的input之上;img中有一個屬性,acc

給dedecms廣告管理增加圖片功能

dedecms的廣告管理功能稍微有點次,本文就是在dedecms廣告管理原有的基礎上增加廣告圖片上傳功能。 安裝方法,對應自己的dedecms版本下載對應的編碼然後解壓把裡面的檔案放在後臺目錄覆蓋即可。 效果圖: 使用辦法:下載相應的版本,覆蓋到對應的目錄。即可,親測無誤 連結:h

ssm+maven專案加入“百度富文字編輯器”,實現圖片

1.在UEditor官方下載編輯器。2.解壓壓縮檔案到資料夾,因為預設的資料夾名字過長,建議重新命名一下資料夾名,我這裡命名為ueditor資料夾中對應的目錄為3.將整個資料夾copy到專案webapp目錄下,(我這裡用的是IDEA,不知道什麼原因直接往IDEA開啟的專案裡拷

jsp實現圖片即時顯示效果功能

<script> function setImagePreview() { var docObj=document.getElementById("doc"); var imgObjPreview=document.getElementById("preview

Android從相簿選取圖片到阿里雲OSS

    在開發APP軟體中,boss突然提出想在軟體中新增一個多張照片上傳的功能,作為菜鳥的我,琢磨了兩天,才弄出來,今天特地貼出來。本篇部落格主要介紹的是將本地圖片上傳到伺服器的方法技巧。主要技術點是: 一、運用第三方可以從相簿中選取多張圖片。 二、將圖片

在Markdown編輯自動圖片

這幾天學習一些技術,寫一些筆記或者相關的文件,一般喜歡用markdown,因為比較通用,而且寫完直接可以傳到csdn上。不管是用typora編輯,還是在csdn上寫,插入圖片始終是一個極其極其蛋疼的事情,而且csdn的相簿找不著了。後來折騰了半天,也看到了網上的

YIIUeditor富文字編輯器檔案和圖片的配置

將Ueditor整合到YII框架中後,參照editor_config.js中的toolbars中的內容,更改options中標籤可以給編輯器新增想要的功能: 因此要想新增檔案和圖片上傳功能,應該加入以下兩個標籤: 文字編輯器中便出現了對應的兩個選項: 但是點選上傳圖片按

fckEditor的使用以及圖片不顯示解決

寫過部落格的都是 在寫部落格的textarea 上面有一些按鈕 類似 word 工具欄 他們其實就是xhEditor.網頁編輯器。今天記錄的也是一種網頁編輯器。就是FCkEditor。使用他需要準備前端FckEditor外掛包。可以在官網下載https://ckeditor

拍照圖片與從相簿選擇圖片

手機拍照與上傳圖片是APP中很常用的功能。 我們先寫個佈局,然後程式碼實現。 MediaStore.ACTION_IMAGE_CAPTURE); //呼叫相機 intent.putExtra(MediaStore.EXTRA_VIDEO_QUALITY,

用nodeExpress做後臺的Vue模組化開發elementUI圖片的問題

 最近在Vue模組化開發中用到了elementUI中圖片上傳的功能,可是把我折騰的夠嗆,花了兩天時間各種查API請教大佬最後解決了問題,希望我的問題可以在某個時候幫助各位。最後多嘴一句 elementUI的API該更新了! element官網:http://element-cn.e

(3)關於ueditor內建功能圖片的使用

往往大家在使用ueditor的時候功能實現之後,發現圖片上傳,視訊上傳等功能是不能使用的,原因就是配置沒有配好。 在ueditor資料夾中找到php資料夾config.json檔案在裡面修改相關的配置。 "/livestoneApp/public