kindeditor上传本地图片实例
所需插件:kindeditor下载 密码: 5ry4
jsp文件:
<script type="text/javascript" language="javascript" src="<%=basePath%>resources/kindeditor/kindeditor-all.js"></script> <script type="text/javascript" language="javascript" src="<%=basePath%>resources/kindeditor/lang/zh-CN.js"></script> <script type="text/javascript" language="javascript" src="<%=basePath%>resources/kindeditor/kindeditor-all-min.js"></script>
<!-- 实例化编辑器 --><script>var editor;KindEditor.ready(function(K) {editor = K.create('textarea[name="content"]', {uploadJson :$('#basePath').val() + 'kindeditor/fileUpload', //后台上传图片路径fileManagerJson : $('#basePath').val() + 'kindeditor/fileManager', resizeType : 1, //2或1或0,2时可以拖动改变宽度和高度,1时只能改变高度,0时不能拖动。 dialogAlignType : 'page', //设置弹出框(dialog)的对齐类型,可设置page和空,指定page时按当前页面居中,指定空时按编辑器居中。 allowPreviewEmoticons : true,//true时鼠标放在表情上可以预览表情。 items : ['undo','redo','|','formatblock','fontname','fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline','strikethrough','removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist','insertunorderedlist','insertorderedlist','insertunorderedlist', '|', 'emoticons', 'image', 'link','media','table','hr','preview','flash','print','|','code','insertfile','baidumap','clearhtml','|','pagebreak','template','anchor'],});});</script>
<textarea id="editor_id" name="content" style="width:1000px;height:245px;overflow:hidden">${ad.content }</textarea><textarea rows="" cols="" name="schtmlnr" id="schtmlnr" style="display:none;"></textarea>
注意:js获取textarea中的内容:无论是form表单提交还是ajax提交,一定要执行sync()函数
editor.sync();
var content = document.getElementById('editor_id').value;//原生API
Controllor文件:
import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Arrays; import java.util.Collections; import java.util.Comparator; import java.util.Date; import java.util.HashMap; import java.util.Hashtable; import java.util.Iterator; import java.util.List; import java.util.Map; import java.util.Random;import javax.servlet.ServletContext; import javax.servlet.ServletException; import javax.servlet.ServletOutputStream; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;import org.apache.commons.fileupload.FileItemFactory; import org.apache.commons.fileupload.FileUploadException; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; import org.codehaus.jackson.map.ObjectMapper; import org.springframework.stereotype.Controller; import org.springframework.util.FileCopyUtils; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import org.springframework.web.multipart.MultipartHttpServletRequest;@Controller @RequestMapping("kindeditor") public class UploadController {private static final ObjectMapper objectMapper = new ObjectMapper();@RequestMapping(value = "/fileUpload", method = RequestMethod.POST)@ResponseBodypublic Map<String, Object> fileUpload(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException,FileUploadException {ServletContext application = request.getSession().getServletContext();String savePath = application.getRealPath("/") + "images/";// 文件保存目录URLString saveUrl = request.getContextPath() + "/images/";// 定义允许上传的文件扩展名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,mp4,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)) {return getError("请选择文件。");}// 检查目录File uploadDir = new File(savePath);if (!uploadDir.isDirectory()) {return getError("上传目录不存在。");}// 检查目录写权限if (!uploadDir.canWrite()) {return getError("上传目录没有写权限。");}String dirName = request.getParameter("dir");if (dirName == null) {dirName = "image";}if (!extMap.containsKey(dirName)) {return getError("目录名不正确。");}// 创建文件夹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");MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;Iterator item = multipartRequest.getFileNames();while (item.hasNext()) {String fileName = (String) item.next();MultipartFile file = multipartRequest.getFile(fileName);// 检查文件大小if (file.getSize() > maxSize) {return getError("上传文件大小超过限制。");}// 检查扩展名 String fileExt = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".") + 1).toLowerCase();if (!Arrays. asList(extMap.get(dirName).split(",")).contains(fileExt)) {return getError("上传文件扩展名是不允许的扩展名。\n只允许"+ extMap.get(dirName) + "格式。");}SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;try {File uploadedFile = new File(savePath, newFileName);FileCopyUtils.copy(file.getInputStream(), new FileOutputStream(uploadedFile));} catch (Exception e) {return getError("上传文件失败。");}Map<String, Object> msg = new HashMap<String, Object>();msg.put("error", 0);msg.put("url", saveUrl + newFileName);return msg;}return null;}private Map<String, Object> getError(String message) {Map<String, Object> msg = new HashMap<String, Object>();msg.put("error", 1);msg.put("message", message);return msg;}@RequestMapping(value = "/fileManager", method = RequestMethod.POST)public void fileManager(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {ServletContext application = request.getSession().getServletContext();ServletOutputStream out = response.getOutputStream();// 根目录路径,可以指定绝对路径,比如 /var/www/attached/String rootPath = application.getRealPath("/") + "images/";// 根目录URL,可以指定绝对路径,比如 http://www.yoursite.com/attached/String rootUrl = request.getContextPath() + "/images/";// 图片扩展名String[] fileTypes = new String[] { "gif", "jpg", "jpeg", "png", "bmp" };String dirName = request.getParameter("dir");if (dirName != null) {if (!Arrays.<String> asList(new String[] { "image", "flash", "media", "file" }).contains(dirName)) {out.println("Invalid Directory name.");return;}rootPath += dirName + "/";rootUrl += dirName + "/";File saveDirFile = new File(rootPath);if (!saveDirFile.exists()) {saveDirFile.mkdirs();}}// 根据path参数,设置各路径和URLString path = request.getParameter("path") != null ? request.getParameter("path") : "";String currentPath = rootPath + path;String currentUrl = rootUrl + path;String currentDirPath = path;String moveupDirPath = "";if (!"".equals(path)) {String str = currentDirPath.substring(0,currentDirPath.length() - 1);moveupDirPath = str.lastIndexOf("/") >= 0 ? str.substring(0,str.lastIndexOf("/") + 1) : "";}// 排序形式,name or size or typeString order = request.getParameter("order") != null ? request.getParameter("order").toLowerCase() : "name";// 不允许使用..移动到上一级目录if (path.indexOf("..") >= 0) {out.println("Access is not allowed.");return;}// 最后一个字符不是/if (!"".equals(path) && !path.endsWith("/")) {out.println("Parameter is not valid.");return;}// 目录不存在或不是目录File currentPathFile = new File(currentPath);if (!currentPathFile.isDirectory()) {out.println("Directory does not exist.");return;}// 遍历目录取的文件信息List<Hashtable> fileList = new ArrayList<Hashtable>();if (currentPathFile.listFiles() != null) {for (File file : currentPathFile.listFiles()) {Hashtable<String, Object> hash = new Hashtable<String, Object>();String fileName = file.getName();if (file.isDirectory()) {hash.put("is_dir", true);hash.put("has_file", (file.listFiles() != null));hash.put("filesize", 0L);hash.put("is_photo", false);hash.put("filetype", "");} else if (file.isFile()) {String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();hash.put("is_dir", false);hash.put("has_file", false);hash.put("filesize", file.length());hash.put("is_photo", Arrays.<String> asList(fileTypes).contains(fileExt));hash.put("filetype", fileExt);}hash.put("filename", fileName);hash.put("datetime",new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(file.lastModified()));fileList.add(hash);}}if ("size".equals(order)) {Collections.sort(fileList, new SizeComparator());} else if ("type".equals(order)) {Collections.sort(fileList, new TypeComparator());} else {Collections.sort(fileList, new NameComparator());}Map<String, Object> msg = new HashMap<String, Object>();msg.put("moveup_dir_path", moveupDirPath);msg.put("current_dir_path", currentDirPath);msg.put("current_url", currentUrl);msg.put("total_count", fileList.size());msg.put("file_list", fileList);response.setContentType("application/json; charset=UTF-8");String msgStr = objectMapper.writeValueAsString(msg);out.println(msgStr);}class NameComparator implements Comparator {public int compare(Object a, Object b) {Hashtable hashA = (Hashtable) a;Hashtable hashB = (Hashtable) b;if (((Boolean) hashA.get("is_dir"))&& !((Boolean) hashB.get("is_dir"))) {return -1;} else if (!((Boolean) hashA.get("is_dir"))&& ((Boolean) hashB.get("is_dir"))) {return 1;} else {return ((String) hashA.get("filename")).compareTo((String) hashB.get("filename"));}}}class SizeComparator implements Comparator {public int compare(Object a, Object b) {Hashtable hashA = (Hashtable) a;Hashtable hashB = (Hashtable) b;if (((Boolean) hashA.get("is_dir"))&& !((Boolean) hashB.get("is_dir"))) {return -1;} else if (!((Boolean) hashA.get("is_dir"))&& ((Boolean) hashB.get("is_dir"))) {return 1;} else {if (((Long) hashA.get("filesize")) > ((Long) hashB.get("filesize"))) {return 1;} else if (((Long) hashA.get("filesize")) < ((Long) hashB.get("filesize"))) {return -1;} else {return 0;}}}}class TypeComparator implements Comparator {public int compare(Object a, Object b) {Hashtable hashA = (Hashtable) a;Hashtable hashB = (Hashtable) b;if (((Boolean) hashA.get("is_dir"))&& !((Boolean) hashB.get("is_dir"))) {return -1;} else if (!((Boolean) hashA.get("is_dir"))&& ((Boolean) hashB.get("is_dir"))) {return 1;} else {return ((String) hashA.get("filetype")).compareTo((String) hashB.get("filetype"));}}}}
View Code
转载于:https://www.cnblogs.com/Crysta1/p/8706640.html
kindeditor上传本地图片实例相关推荐
- kindeditor上传本地图片的问题
终于给我发现kindeditor上传本地图片时,为什么出现服务器错误 原来demo.jsp里的: KE.show({ id : 'content1', imageUploadJson : '../.. ...
- Kindeditor上传本地图片成功后不回显,弹出层也不关闭,解决办法
一. 只要本地上传,不要网络图片,的方法:把kindeditor一个image.js中 allowImageRemote = K.undef(self.allowImageRemote, true) ...
- php上传图片代码编辑,simditor上传本地图片 php
网上有很多simditor这个编辑器的文档,但是大多是重复的,并且php做服务端的也很少.最近做了一个上传功能,研究了一下,跟大家分享一下. 首先 说一下逻辑,理解好了逻辑,才能更好的理解代码. 点击 ...
- tinymce4.x 上传本地图片(自己写个插件)
tinymce是一款挺不错的html文本编辑器.但是添加图片是直接添加链接,不能直接选择本地图片. 下面我写了一个插件用于直接上传本地图片. 在tinymce的plugins目录下新建一个upload ...
- 富文本框TinyMCE4.8上传本地图片基本配置(前端篇)
最近使用了一下TinyMCE富文本框,感觉是非常不错的一款,配置简单,界面优美,完全免费...推荐大家使用. 官方文档也比较容易阅读,大家有兴趣的可以自己去看看https://www.tiny.clo ...
- 解决MarkDown上传本地图片无法显示
解决MarkDown上传本地图片无法显示 前言 提示:什么牛头马面写的代码,今天写个技术博客想插入一张图片发现无法显示,接着按流程在博客一顿找,发现我开头第一句,不知道怎么形容垃圾场里面找垃圾的心情. ...
- 有道云笔记markdown上传本地图片的方法
有道云笔记markdown上传本地图片的方法 有道云笔记markdown模式非会员发现不能直接截屏粘贴图片了.后来网上搜集了下方法,发现了好几种解决办法. 当然,如果你一年,不差那两百块钱,直 ...
- 关于wangEditor5上传本地图片的详细配置
最近在写个人博客用到了富文本编辑器,这里用的是wangEditor5版本,但是浏览了官网并没有发现上传本地图片的详细配置,很是头疼,最终在官方的demo源码中找到了本地上传的详细配置,豁然开朗! co ...
- element-tiptap富文本编辑器,上传本地图片
因为通过富文本编辑器上传本地图片,都会直接转成base64格式的,我们可以先上传到服务器,再从服务器返回的URL拿到给富文本框展示(引入我就不说了,直接看我上篇文章有说到过) data () {// ...
最新文章
- vue---进行post和get请求
- 简解Css - 多变的边框
- 【TarsosDSP】TarsosDSP 简介 ( TarsosDSP 功能 | 相关链接 | 源码和相关资源收集 | TarsosDSP 示例应用 | TarsosDSP 源码路径解析 )
- [Machine Learning]--无监督学习
- egret3D与2D混合开发,画布尺寸不一致的问题
- cobalt strick 4.0系列教程(3)---数据管理
- C语言读取load格式文件,求指导,如何用c语言实现读取*.raw格式图像
- 输入班级人数,根据人数,挨个输入成绩,求平均分,求最高分最低分
- ViewPager 中添加监听
- android root点击事件,在Android中使用InputManagerService进行事件传递
- Nginx(二)状态信息(status)
- telnet不通linux下tomcat端口
- huya虎牙小程序------真心话大冒险
- java-php-python-ssm制药企业人力资源管理系统计算机毕业设计
- 打卡 day 8 数组
- 交叉编译ffmpeg:aac x264 x265
- 一款内网横向渗透辅助工具
- 开发中Base64编码运用
- Far_planner初次探索全过程(attempt search)
- 女士细线毛衣起多少针_手工编织毛衣各处针数和方法
热门文章
- 试题 C: 数列求值
- 如果一份工作让你时常感到焦虑,你会不会立马辞职?
- 完美扒站, 整站下载
- Css_display: block inline inline-bock区别
- 小米note刷android8.1,小米note安卓8.1.0刷机包
- MySQL查看数据库状态命令详解
- MaxEnt: 最大熵模型(Maximum Entropy Models)
- 【矩阵论】5. 线性空间与线性变换——生成子空间
- Android连接多个usb,Android实现USB连接
- css如何添加模糊效果,css动态模糊效果