- 浏览: 53238 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
宋建勇:
那我要实现三个输入框,至少有一个不能为空,怎么验证?!
DWZ验证表单规则一览 -
xy_arrow:
能把包 也发下吗 ? 744743291@qq.com
基于注解的SpringMVC整合JPA
CKEditor 3开启文件上传功能(Servlet实现) 转载自 http://sarin.javaeye.com/blog/599499
本文在http://sarin.javaeye.com/blog/599056介绍的基础之上进行进一步的研究。
在CKEditor中把上传配置给打开,很简单,脚本段改为如下设置:
Js代码
<script type="text/javascript">
CKEDITOR.replace('content',{filebrowserUploadUrl : '/ckeditor/ckeditor/uploader?Type=File',
filebrowserImageUploadUrl : '/ckeditor/ckeditor/uploader?Type=Image',
filebrowserFlashUploadUrl : '/ckeditor/ckeditor/uploader?Type=Flash'
});
</script>
这里参数我们可以自己设置,加个Type为了区分文件类型,因为都使用同一个Servlet处理。事情没有这么简单,CKEditor毕竟是个复杂的组件,我们这么配置,看看它给我们还原成什么了吧,在FireFox中使用FireBug查看,看到了这些:
看到了吧,在Type后面它为我们又挂接了几个参数,其中我们需要的是CKEditorFuncNum和file域的name值upload,CKEditorFuncNum这个参数是用来回调页面的,就是上传成功后,页面自动切换到“图像”选项卡。upload参数是servlet获取上传文件用的参数名。其余参数就根据需要进行了。
这些参数的名称都是查看源码获得的,不能想当然。有了这些东西后面就好办了,就是文件上传了么。很简单了。这里我们使用apache commons组件中的fileupload和io。
先看web.xml,我们做些设置。
Xml代码
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<servlet-name>SimpleUploader</servlet-name>
<servlet-class>ckeditor.CKEditorUploadServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<param-value>/UserFiles/</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>false</param-value>
</init-param>
<init-param>
<param-name>enabled</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsFile</param-name>
<param-value></param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsFile</param-name>
<param-value>
html|htm|php|php2|php3|php4|php5|phtml|pwml|inc|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|com|dll|vbs|js|reg|cgi|htaccess|asis|ftl
</param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsImage</param-name>
<param-value>jpg|gif|jpeg|png|bmp</param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsImage</param-name>
<param-value></param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsFlash</param-name>
<param-value>swf|fla</param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsFlash</param-name>
<param-value></param-value>
</init-param>
<load-on-startup>0</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>SimpleUploader</servlet-name>
<url-pattern>/ckeditor/uploader</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>
主要是Servlet的初始化参数,规定了文件上传的扩展名规则,就是允许上传的类型和阻止上传的类型。分为File,Image和FLASH三种,这个上传参数的设置是对应的。Debug是设置servlet知否进行debug,默认是关闭的。enabled是设置该servlet是否有效,如果禁止上传,就打成false。还有一个baseDir是设定CKEditor上传文件的存放位置。
下面就是实现类了,比较长,但是有详细的注释:
Java代码
package ckeditor;
import java.io.*;
import java.text.SimpleDateFormat;
import java.util.*;
import javax.servlet.ServletException;
import javax.servlet.http.*;
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;
public class CKEditorUploadServlet extends HttpServlet {
private static String baseDir;// CKEditor的根目录
private static boolean debug = false;// 是否debug模式
private static boolean enabled = false;// 是否开启CKEditor上传
private static Hashtable allowedExtensions;// 允许的上传文件扩展名
private static Hashtable deniedExtensions;// 阻止的上传文件扩展名
private static SimpleDateFormat dirFormatter;// 目录命名格式:yyyyMM
private static SimpleDateFormat fileFormatter;// 文件命名格式:yyyyMMddHHmmssSSS
/**
* Servlet初始化方法
*/
public void init() throws ServletException {
// 从web.xml中读取debug模式
debug = (new Boolean(getInitParameter("debug"))).booleanValue();
if (debug)
System.out
.println("\r\n---- SimpleUploaderServlet initialization started ----");
// 格式化目录和文件命名方式
dirFormatter = new SimpleDateFormat("yyyyMM");
fileFormatter = new SimpleDateFormat("yyyyMMddHHmmssSSS");
// 从web.xml中获取根目录名称
baseDir = getInitParameter("baseDir");
// 从web.xml中获取是否可以进行文件上传
enabled = (new Boolean(getInitParameter("enabled"))).booleanValue();
if (baseDir == null)
baseDir = "/UserFiles/";
String realBaseDir = getServletContext().getRealPath(baseDir);
File baseFile = new File(realBaseDir);
if (!baseFile.exists()) {
baseFile.mkdirs();
}
// 实例化允许的扩展名和阻止的扩展名
allowedExtensions = new Hashtable(3);
deniedExtensions = new Hashtable(3);
// 从web.xml中读取配置信息
allowedExtensions.put("File",
stringToArrayList(getInitParameter("AllowedExtensionsFile")));
deniedExtensions.put("File",
stringToArrayList(getInitParameter("DeniedExtensionsFile")));
allowedExtensions.put("Image",
stringToArrayList(getInitParameter("AllowedExtensionsImage")));
deniedExtensions.put("Image", stringToArrayList(getInitParameter("DeniedExtensionsImage")));
allowedExtensions.put("Flash", stringToArrayList(getInitParameter("AllowedExtensionsFlash")));
deniedExtensions.put("Flash", stringToArrayList(getInitParameter("DeniedExtensionsFlash")));
if (debug)
System.out
.println("---- SimpleUploaderServlet initialization completed ----\r\n");
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
if (debug)
System.out.println("--- BEGIN DOPOST ---");
response.setContentType("text/html; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
PrintWriter out = response.getWriter();
// 从请求参数中获取上传文件的类型:File/Image/Flash
String typeStr = request.getParameter("Type");
if (typeStr == null) {
typeStr = "File";
}
if (debug)
System.out.println(typeStr);
// 实例化dNow对象,获取当前时间
Date dNow = new Date();
// 设定上传文件路径
String currentPath = baseDir + typeStr + "/"
+ dirFormatter.format(dNow);
// 获得web应用的上传路径
String currentDirPath = getServletContext().getRealPath(currentPath);
// 判断文件夹是否存在,不存在则创建
File dirTest = new File(currentDirPath);
if (!dirTest.exists()) {
dirTest.mkdirs();
}
// 将路径前加上web应用名
currentPath = request.getContextPath() + currentPath;
if (debug)
System.out.println(currentDirPath);
// 文件名和文件真实路径
String newName = "";
String fileUrl = "";
if (enabled) {
// 使用Apache Common组件中的fileupload进行文件上传
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
try {
List items = upload.parseRequest(request);
Map fields = new HashMap();
Iterator iter = items.iterator();
while (iter.hasNext()) {
FileItem item = (FileItem) iter.next();
if (item.isFormField())
fields.put(item.getFieldName(), item.getString());
else
fields.put(item.getFieldName(), item);
}
// CEKditor中file域的name值是upload
FileItem uplFile = (FileItem) fields.get("upload");
// 获取文件名并做处理
String fileNameLong = uplFile.getName();
fileNameLong = fileNameLong.replace('\\', '/');
String[] pathParts = fileNameLong.split("/");
String fileName = pathParts[pathParts.length - 1];
// 获取文件扩展名
String ext = getExtension(fileName);
// 设置上传文件名
fileName = fileFormatter.format(dNow) + "." + ext;
// 获取文件名(无扩展名)
String nameWithoutExt = getNameWithoutExtension(fileName);
File pathToSave = new File(currentDirPath, fileName);
fileUrl = currentPath + "/" + fileName;
if (extIsAllowed(typeStr, ext)) {
int counter = 1;
while (pathToSave.exists()) {
newName = nameWithoutExt + "_" + counter + "." + ext;
fileUrl = currentPath + "/" + newName;
pathToSave = new File(currentDirPath, newName);
counter++;
}
uplFile.write(pathToSave);
} else {
if (debug)
System.out.println("无效的文件类型: " + ext);
}
} catch (Exception ex) {
if (debug)
ex.printStackTrace();
}
} else {
if (debug)
System.out.println("未开启CKEditor上传功能");
}
// CKEditorFuncNum是回调时显示的位置,这个参数必须有
String callback = request.getParameter("CKEditorFuncNum");
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
+ ",'" + fileUrl + "',''" + ")");
out.println("</script>");
out.flush();
out.close();
if (debug)
System.out.println("--- END DOPOST ---");
}
/**
* 获取文件名的方法
*/
private static String getNameWithoutExtension(String fileName) {
return fileName.substring(0, fileName.lastIndexOf("."));
}
/**
* 获取扩展名的方法
*/
private String getExtension(String fileName) {
return fileName.substring(fileName.lastIndexOf(".") + 1);
}
/**
* 字符串像ArrayList转化的方法
*/
private ArrayList stringToArrayList(String str) {
if (debug)
System.out.println(str);
String[] strArr = str.split("\\|");
ArrayList tmp = new ArrayList();
if (str.length() > 0) {
for (int i = 0; i < strArr.length; ++i) {
if (debug)
System.out.println(i + " - " + strArr[i]);
tmp.add(strArr[i].toLowerCase());
}
}
return tmp;
}
/**
* 判断扩展名是否允许的方法
*/
private boolean extIsAllowed(String fileType, String ext) {
ext = ext.toLowerCase();
ArrayList allowList = (ArrayList) allowedExtensions.get(fileType);
ArrayList denyList = (ArrayList) deniedExtensions.get(fileType);
if (allowList.size() == 0) {
if (denyList.contains(ext)) {
return false;
} else {
return true;
}
}
if (denyList.size() == 0) {
if (allowList.contains(ext)) {
return true;
} else {
return false;
}
}
return false;
}
}
只要在页面中的script中设置了上传属性,我们打开图片时就能看到上传选项卡了,选择图片后,点击上传到服务器,上传成功就会自动跳到图像选项卡,可以看到源文件已经存在服务器的目标目录中了,此时,我们就可以在编辑器中编辑上传的图片了,非常方便。
下面我们进行图片上传测试,可以看到如下效果。
提交后可以看到,数据获得效果,是完全一致的,这样使用CKEditor上传文件就已经成功了。
我们查看源文件,得到如下结果。
Html代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Display Content</title>
</head>
<body>
<center>
<table width="600" border="0" bordercolor="000000"
style="table-layout: fixed;">
<tbody>
<tr>
<td width="100" bordercolor="ffffff">主题:</td>
<td width="500" bordercolor="ffffff">图片上传测试</td>
</tr>
<tr>
<td valign="top" bordercolor="ffffff">内容:</td>
<td valign="top" bordercolor="ffffff">
<p style="text-align: center;"><span style="color: #f00;"><strong><span
style="font-family: courier new, courier, monospace;"><span
style="font-size: 48px;">图片上传测试</span></span></strong></span></p>
<p style="text-align: center;"><img alt=""
src="/ckeditor/UserFiles/Image/201002/20100217232748000.gif"
style="width: 133px; height: 41px;"></p>
<p style="text-align: center;"><span
style="font-family: courier new, courier, monospace;"><br>
</span></p>
</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
在服务器目录中,上传的文件已经存在其中了。
欢迎交流,希望对使用者有用。
本文在http://sarin.javaeye.com/blog/599056介绍的基础之上进行进一步的研究。
在CKEditor中把上传配置给打开,很简单,脚本段改为如下设置:
Js代码
<script type="text/javascript">
CKEDITOR.replace('content',{filebrowserUploadUrl : '/ckeditor/ckeditor/uploader?Type=File',
filebrowserImageUploadUrl : '/ckeditor/ckeditor/uploader?Type=Image',
filebrowserFlashUploadUrl : '/ckeditor/ckeditor/uploader?Type=Flash'
});
</script>
这里参数我们可以自己设置,加个Type为了区分文件类型,因为都使用同一个Servlet处理。事情没有这么简单,CKEditor毕竟是个复杂的组件,我们这么配置,看看它给我们还原成什么了吧,在FireFox中使用FireBug查看,看到了这些:
看到了吧,在Type后面它为我们又挂接了几个参数,其中我们需要的是CKEditorFuncNum和file域的name值upload,CKEditorFuncNum这个参数是用来回调页面的,就是上传成功后,页面自动切换到“图像”选项卡。upload参数是servlet获取上传文件用的参数名。其余参数就根据需要进行了。
这些参数的名称都是查看源码获得的,不能想当然。有了这些东西后面就好办了,就是文件上传了么。很简单了。这里我们使用apache commons组件中的fileupload和io。
先看web.xml,我们做些设置。
Xml代码
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<servlet-name>SimpleUploader</servlet-name>
<servlet-class>ckeditor.CKEditorUploadServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<param-value>/UserFiles/</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>false</param-value>
</init-param>
<init-param>
<param-name>enabled</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsFile</param-name>
<param-value></param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsFile</param-name>
<param-value>
html|htm|php|php2|php3|php4|php5|phtml|pwml|inc|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|com|dll|vbs|js|reg|cgi|htaccess|asis|ftl
</param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsImage</param-name>
<param-value>jpg|gif|jpeg|png|bmp</param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsImage</param-name>
<param-value></param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsFlash</param-name>
<param-value>swf|fla</param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsFlash</param-name>
<param-value></param-value>
</init-param>
<load-on-startup>0</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>SimpleUploader</servlet-name>
<url-pattern>/ckeditor/uploader</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>
主要是Servlet的初始化参数,规定了文件上传的扩展名规则,就是允许上传的类型和阻止上传的类型。分为File,Image和FLASH三种,这个上传参数的设置是对应的。Debug是设置servlet知否进行debug,默认是关闭的。enabled是设置该servlet是否有效,如果禁止上传,就打成false。还有一个baseDir是设定CKEditor上传文件的存放位置。
下面就是实现类了,比较长,但是有详细的注释:
Java代码
package ckeditor;
import java.io.*;
import java.text.SimpleDateFormat;
import java.util.*;
import javax.servlet.ServletException;
import javax.servlet.http.*;
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;
public class CKEditorUploadServlet extends HttpServlet {
private static String baseDir;// CKEditor的根目录
private static boolean debug = false;// 是否debug模式
private static boolean enabled = false;// 是否开启CKEditor上传
private static Hashtable allowedExtensions;// 允许的上传文件扩展名
private static Hashtable deniedExtensions;// 阻止的上传文件扩展名
private static SimpleDateFormat dirFormatter;// 目录命名格式:yyyyMM
private static SimpleDateFormat fileFormatter;// 文件命名格式:yyyyMMddHHmmssSSS
/**
* Servlet初始化方法
*/
public void init() throws ServletException {
// 从web.xml中读取debug模式
debug = (new Boolean(getInitParameter("debug"))).booleanValue();
if (debug)
System.out
.println("\r\n---- SimpleUploaderServlet initialization started ----");
// 格式化目录和文件命名方式
dirFormatter = new SimpleDateFormat("yyyyMM");
fileFormatter = new SimpleDateFormat("yyyyMMddHHmmssSSS");
// 从web.xml中获取根目录名称
baseDir = getInitParameter("baseDir");
// 从web.xml中获取是否可以进行文件上传
enabled = (new Boolean(getInitParameter("enabled"))).booleanValue();
if (baseDir == null)
baseDir = "/UserFiles/";
String realBaseDir = getServletContext().getRealPath(baseDir);
File baseFile = new File(realBaseDir);
if (!baseFile.exists()) {
baseFile.mkdirs();
}
// 实例化允许的扩展名和阻止的扩展名
allowedExtensions = new Hashtable(3);
deniedExtensions = new Hashtable(3);
// 从web.xml中读取配置信息
allowedExtensions.put("File",
stringToArrayList(getInitParameter("AllowedExtensionsFile")));
deniedExtensions.put("File",
stringToArrayList(getInitParameter("DeniedExtensionsFile")));
allowedExtensions.put("Image",
stringToArrayList(getInitParameter("AllowedExtensionsImage")));
deniedExtensions.put("Image", stringToArrayList(getInitParameter("DeniedExtensionsImage")));
allowedExtensions.put("Flash", stringToArrayList(getInitParameter("AllowedExtensionsFlash")));
deniedExtensions.put("Flash", stringToArrayList(getInitParameter("DeniedExtensionsFlash")));
if (debug)
System.out
.println("---- SimpleUploaderServlet initialization completed ----\r\n");
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
if (debug)
System.out.println("--- BEGIN DOPOST ---");
response.setContentType("text/html; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
PrintWriter out = response.getWriter();
// 从请求参数中获取上传文件的类型:File/Image/Flash
String typeStr = request.getParameter("Type");
if (typeStr == null) {
typeStr = "File";
}
if (debug)
System.out.println(typeStr);
// 实例化dNow对象,获取当前时间
Date dNow = new Date();
// 设定上传文件路径
String currentPath = baseDir + typeStr + "/"
+ dirFormatter.format(dNow);
// 获得web应用的上传路径
String currentDirPath = getServletContext().getRealPath(currentPath);
// 判断文件夹是否存在,不存在则创建
File dirTest = new File(currentDirPath);
if (!dirTest.exists()) {
dirTest.mkdirs();
}
// 将路径前加上web应用名
currentPath = request.getContextPath() + currentPath;
if (debug)
System.out.println(currentDirPath);
// 文件名和文件真实路径
String newName = "";
String fileUrl = "";
if (enabled) {
// 使用Apache Common组件中的fileupload进行文件上传
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
try {
List items = upload.parseRequest(request);
Map fields = new HashMap();
Iterator iter = items.iterator();
while (iter.hasNext()) {
FileItem item = (FileItem) iter.next();
if (item.isFormField())
fields.put(item.getFieldName(), item.getString());
else
fields.put(item.getFieldName(), item);
}
// CEKditor中file域的name值是upload
FileItem uplFile = (FileItem) fields.get("upload");
// 获取文件名并做处理
String fileNameLong = uplFile.getName();
fileNameLong = fileNameLong.replace('\\', '/');
String[] pathParts = fileNameLong.split("/");
String fileName = pathParts[pathParts.length - 1];
// 获取文件扩展名
String ext = getExtension(fileName);
// 设置上传文件名
fileName = fileFormatter.format(dNow) + "." + ext;
// 获取文件名(无扩展名)
String nameWithoutExt = getNameWithoutExtension(fileName);
File pathToSave = new File(currentDirPath, fileName);
fileUrl = currentPath + "/" + fileName;
if (extIsAllowed(typeStr, ext)) {
int counter = 1;
while (pathToSave.exists()) {
newName = nameWithoutExt + "_" + counter + "." + ext;
fileUrl = currentPath + "/" + newName;
pathToSave = new File(currentDirPath, newName);
counter++;
}
uplFile.write(pathToSave);
} else {
if (debug)
System.out.println("无效的文件类型: " + ext);
}
} catch (Exception ex) {
if (debug)
ex.printStackTrace();
}
} else {
if (debug)
System.out.println("未开启CKEditor上传功能");
}
// CKEditorFuncNum是回调时显示的位置,这个参数必须有
String callback = request.getParameter("CKEditorFuncNum");
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
+ ",'" + fileUrl + "',''" + ")");
out.println("</script>");
out.flush();
out.close();
if (debug)
System.out.println("--- END DOPOST ---");
}
/**
* 获取文件名的方法
*/
private static String getNameWithoutExtension(String fileName) {
return fileName.substring(0, fileName.lastIndexOf("."));
}
/**
* 获取扩展名的方法
*/
private String getExtension(String fileName) {
return fileName.substring(fileName.lastIndexOf(".") + 1);
}
/**
* 字符串像ArrayList转化的方法
*/
private ArrayList stringToArrayList(String str) {
if (debug)
System.out.println(str);
String[] strArr = str.split("\\|");
ArrayList tmp = new ArrayList();
if (str.length() > 0) {
for (int i = 0; i < strArr.length; ++i) {
if (debug)
System.out.println(i + " - " + strArr[i]);
tmp.add(strArr[i].toLowerCase());
}
}
return tmp;
}
/**
* 判断扩展名是否允许的方法
*/
private boolean extIsAllowed(String fileType, String ext) {
ext = ext.toLowerCase();
ArrayList allowList = (ArrayList) allowedExtensions.get(fileType);
ArrayList denyList = (ArrayList) deniedExtensions.get(fileType);
if (allowList.size() == 0) {
if (denyList.contains(ext)) {
return false;
} else {
return true;
}
}
if (denyList.size() == 0) {
if (allowList.contains(ext)) {
return true;
} else {
return false;
}
}
return false;
}
}
只要在页面中的script中设置了上传属性,我们打开图片时就能看到上传选项卡了,选择图片后,点击上传到服务器,上传成功就会自动跳到图像选项卡,可以看到源文件已经存在服务器的目标目录中了,此时,我们就可以在编辑器中编辑上传的图片了,非常方便。
下面我们进行图片上传测试,可以看到如下效果。
提交后可以看到,数据获得效果,是完全一致的,这样使用CKEditor上传文件就已经成功了。
我们查看源文件,得到如下结果。
Html代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Display Content</title>
</head>
<body>
<center>
<table width="600" border="0" bordercolor="000000"
style="table-layout: fixed;">
<tbody>
<tr>
<td width="100" bordercolor="ffffff">主题:</td>
<td width="500" bordercolor="ffffff">图片上传测试</td>
</tr>
<tr>
<td valign="top" bordercolor="ffffff">内容:</td>
<td valign="top" bordercolor="ffffff">
<p style="text-align: center;"><span style="color: #f00;"><strong><span
style="font-family: courier new, courier, monospace;"><span
style="font-size: 48px;">图片上传测试</span></span></strong></span></p>
<p style="text-align: center;"><img alt=""
src="/ckeditor/UserFiles/Image/201002/20100217232748000.gif"
style="width: 133px; height: 41px;"></p>
<p style="text-align: center;"><span
style="font-family: courier new, courier, monospace;"><br>
</span></p>
</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
在服务器目录中,上传的文件已经存在其中了。
欢迎交流,希望对使用者有用。
相关推荐
本篇将详细探讨“WZL编辑器”与“WIS编辑器”,以及与之相关的知识点。 首先,“WZL编辑器”是一个专门针对WZL格式文件设计的高级文本编辑器。WZL是一种可能用于游戏、软件配置或者特定数据存储的文件格式。这种...
蜜蜂El编辑器是一款专为游戏爱好者设计的强大工具,主要用于修改和完善各类游戏的数据,尤其是诛仙、完美世界、武林外传以及口袋系列等游戏。这款编辑器的最新版本是v4.3.8,名为"ElementsEditor",它提供了一整套...
"Discuz可视化编辑器"是Discuz论坛系统中的一部分,主要用于帮助用户在发布帖子或编辑内容时,提供一个直观、易用的界面,使得非编程背景的用户也能轻松进行格式化和美化文本。这个编辑器增强了用户体验,简化了内容...
**Wil编辑器详解** **一、什么是Wil编辑器** Wil编辑器是一款专为程序员和文本工作者设计的专业级文本编辑工具,具有丰富的功能和高度的可定制性。它以免费下载和使用的优势,深受广大用户的喜爱。尽管免费,但Wil...
《传奇多功能脚本编辑器——高效开发传奇脚本的得力助手》 在游戏开发领域,尤其是对于传奇这种经典网络游戏的版本更新与维护,脚本编辑器扮演着至关重要的角色。"传奇多功能脚本编辑器"就是这样一款专为传奇脚本...
《WZl客户端补丁编辑器:探索游戏客户端更新与优化的秘密》 在网络游戏领域,客户端补丁编辑器是至关重要的工具,它允许开发者和管理员对游戏客户端进行修改和优化,以提供更好的游戏体验。本文将详细介绍“WZl...
这个编辑器不仅允许用户输入和编辑复杂的数学表达式,还具备函数编辑和图形绘制的功能,极大地提升了在网页上处理数学公式的便利性。 在JavaScript公式编辑器中,主要涉及以下几个核心知识点: 1. **JavaScript**...
海龟编辑器是由编程猫推出的专门针对Python初学者的编程工具。这个编辑器设计的目标是为初学者提供一个友好、直观且易于上手的环境,让他们可以轻松地学习和实践Python编程语言。在这个编辑器中,用户不仅可以编写...
本代码我已经改进,编辑器已加宽,2.7.3可用。UEditor是由百度web前端研发部开发所见即所得文本web编辑器,具有轻量,可定制,注重用户体验等特点。功能全面、专业稳定、用户体验佳。UEditor优点体积小巧,性能优良...
【标题】:“word文本在线编辑器” 在当前的数字化时代,传统的桌面软件逐渐被Web应用程序所取代,Word文本在线编辑器就是这样的一个例子。它允许用户在网页浏览器中直接创建、编辑和保存Word文档,无需安装任何...
这款编辑器提供了诸如上下移动行、单元格内数据编辑等功能,大大提升了在网页中操作表格的效率。 在HTML中,`<table>`元素是创建表格的基础,它包含了若干`<tr>`(表格行)元素,每个`<tr>`又包含若干`<td>`(表格...
当CPU占用率达100%时就不能正常使用编辑器了(大家注意) 创建者:写自己的名字就行了,在主程序里要显示所有编辑者的名字。 打开文件:选择一个编辑器编辑的文件即可打开。 保存文件:保存编辑文件(用二进制数...
DB数据编辑器是一款专为SQLite数据库设计的工具,它允许用户直观地查看、编辑和管理SQLite数据库中的数据。SQLite是一个轻量级、自包含的数据库系统,广泛应用于移动设备、嵌入式系统以及桌面应用程序中。这个压缩包...
《俊豪传奇地图编辑器》是一款专为传奇类游戏设计的地图编辑工具,相较于其他同类编辑器,如晨风地图编辑器,它具有更优秀的用户体验和更丰富的功能特性,深受广大玩家和地图创作者的喜爱。这款编辑器曾被HX团队内部...
"wil真彩编辑器"是一款专业级别的文本编辑工具,它以强大的功能和高效的性能为特点,专为程序员、开发者以及高级用户设计。该编辑器的名字"Wil"可能来源于英文单词"Will",寓意着它能按照用户的意愿进行精确的操作,...
在现代Web应用中,用户有时需要在网页上编辑文本并进行打印操作,这通常涉及到前端技术中的富文本编辑器和打印功能。"简单方便的web打印编辑器"是指一种能够帮助用户在浏览器环境下轻松编辑和打印内容的工具,它使得...
在线编辑器,特别是HTML编辑器,是Web开发中不可或缺的工具。它们允许用户在浏览器环境中直接编辑、格式化和预览HTML代码,极大地提升了网页设计和内容创作的效率。以下是对这一主题的详细阐述: 一、在线编辑器...
《晨风地图编辑器2.6:打造优质地图的新里程》 在众多的地图编辑器中,晨风地图编辑器以其易用性和强大的功能受到了广大用户的喜爱。然而,早期的2.0和2.1版本在使用过程中存在一些问题,如切图时出现花屏现象以及...
135富文本编辑器是一款广泛应用于网页内容编辑的工具,尤其在新闻、博客、论坛等领域,它提供了丰富的文本格式化选项,使得非程序员也能轻松创建出美观且专业的排版内容。这款编辑器以其易用性和灵活性而备受青睐,...
一种基于BS架构的电子病历编辑器 本资源是关于一种基于BS架构的电子病历编辑器,其主要特点是使用BS架构设计,包括病历编辑模块、小模板模块、病历组件模块、节点存储模块、病历存储模块和模板存储模块等多个模块。...