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的相簿找不著了。後來折騰了半天,也看到了網上的
YII中Ueditor富文字編輯器檔案和圖片上傳的配置
將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