KIndEditor的JSP文件、图片上传的实现

本文转载自 aaa1117a8w5s6d 查看原文 2012/06/25 4304 stylesheet/ file/ string/ import/ jsp/ function/ 上传

昨天通过对KIndEditor 在线编辑器的了解，发现其几百KB的体积是非常轻量级的，而且由于其全部都是由JavaScript文件组成，所以与这个多种动态网页语言嵌套的非常好，它的作用是非常大的，下面是我通过对其的了解，而写的JSP文件：

Index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String htmlData = request.getParameter("content1") != null ? request.getParameter("content1") : "";
%>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>KindEditor JSP</title>
<link rel="stylesheet" href="../themes/default/default.css" />
<link rel="stylesheet" href="../plugins/code/prettify.css" />
<script charset="utf-8" src="../kindeditor.js"></script>
<script charset="utf-8" src="../lang/zh_CN.js"></script>
<script charset="utf-8" src="../plugins/code/prettify.js"></script>
<script>
  KindEditor.ready(function(K) {
   var editor1 = K.create('textarea[name="content1"]', {
    cssPath : '../plugins/code/prettify.css',
    uploadJson : '../jsp/upload_json.jsp',
    fileManagerJson : '../jsp/file_manager_json.jsp',
    allowFileManager : true,
    afterCreate : function() {
     var self = this;
     K.ctrl(document, 13, function() {
      self.sync();
      document.forms['example'].submit();
     });
     K.ctrl(self.edit.doc, 13, function() {
      self.sync();
      document.forms['example'].submit();
     });
    }
   });
   prettyPrint();
  });
</script>
</head>
<body>
<%=htmlData%>
<form name="example" method="post" action="demo.jsp">
  <textarea name="content1" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;"><%=htmlspecialchars(htmlData)%></textarea>
  <br />
  <input type="submit" name="button" value="提交内容" /> (提交快捷键: Ctrl + Enter)
</form>
</body>
</html>
<%!
private String htmlspecialchars(String str) {
str = str.replaceAll("&", "&");
str = str.replaceAll("<", "<");
str = str.replaceAll(">", ">");
str = str.replaceAll("\"", """);
return str;
}
%>

从上面不难看出这是跟CKEditor神似，我个人非常喜欢它的上传功能，比如上传文件和上传图片功能，下面附上上传的文件（包括图片的处理），fileLoad.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.*,java.io.*" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="org.apache.commons.fileupload.*" %>
<%@ page import="org.apache.commons.fileupload.disk.*" %>
<%@ page import="org.apache.commons.fileupload.servlet.*" %>
<%@ page import="org.json.simple.*" %>
<%

//文件保存目录路径
String savePath = pageContext.getServletContext().getRealPath("/") + "attached/";

//文件保存目录URL
String saveUrl = request.getContextPath() + "/attached/";

//定义允许上传的文件扩展名
HashMap<String, String> extMap = new HashMap<String, String>();
extMap.put("image", "gif,jpg,jpeg,png,bmp");
extMap.put("flash", "swf,flv");
extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");

//最大文件大小
long maxSize = 1000000;

response.setContentType("text/html; charset=UTF-8");

if(!ServletFileUpload.isMultipartContent(request)){
out.println(getError("请选择文件。"));
return;
}
//检查目录
File uploadDir = new File(savePath);
if(!uploadDir.isDirectory()){
out.println(getError("上传目录不存在。"));
return;
}
//检查目录写权限
if(!uploadDir.canWrite()){
out.println(getError("上传目录没有写权限。"));
return;
}

String dirName = request.getParameter("dir");
if (dirName == null) {
dirName = "image";
}
if(!extMap.containsKey(dirName)){
out.println(getError("目录名不正确。"));
return;
}
//创建文件夹
savePath += dirName + "/";
saveUrl += dirName + "/";
File saveDirFile = new File(savePath);
if (!saveDirFile.exists()) {
saveDirFile.mkdirs();
}
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
String ymd = sdf.format(new Date());
savePath += ymd + "/";
saveUrl += ymd + "/";
File dirFile = new File(savePath);
if (!dirFile.exists()) {
dirFile.mkdirs();
}

FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setHeaderEncoding("UTF-8");
List items = upload.parseRequest(request);
Iterator itr = items.iterator();
while (itr.hasNext()) {
FileItem item = (FileItem) itr.next();
String fileName = item.getName();
long fileSize = item.getSize();
if (!item.isFormField()) {
  //检查文件大小
  if(item.getSize() > maxSize){
   out.println(getError("上传文件大小超过限制。"));
   return;
  }
  //检查扩展名
  String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
  if(!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)){
   out.println(getError("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。"));
   return;
  }

  SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
  String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
  try{
   File uploadedFile = new File(savePath, newFileName);
   item.write(uploadedFile);
  }catch(Exception e){
   out.println(getError("上传文件失败。"));
   return;
  }

  JSONObject obj = new JSONObject();
  obj.put("error", 0);
  obj.put("url", saveUrl + newFileName);
  out.println(obj.toJSONString());
}
}
%>
<%!
private String getError(String message) {
JSONObject obj = new JSONObject();
obj.put("error", 1);
obj.put("message", message);
return obj.toJSONString();
}
%>

智能推荐

注意！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。

猜您在找

KindEditor4 struts2 jsp 本地图片或文件上传 SpringMvc + Jsp+ 富文本 kindeditor 进行图片ftp上传nginx服务器实现 kindeditor图片上传 struts2实现从零基础认识KindEditor实现图片上传 FASTDFS配合kindeditor-实现图片上传

赞助商链接

KIndEditor的JSP文件、图片上传的实现

注意！

赞助商广告