html编辑图片管理库,在线HTML文档编辑器使用入门之图片上传与图片管理的实现 Web程序 - 贪吃蛇学院-专业IT技术平台...

1 在线HTML文档编辑器使用入门之图片上传与图片管理的实现：2 官方网址： http://kindeditor.net/demo.php

3 开发步骤：4 1.开发中只需要导入选中的文件(通常在 webapp 下，建立 editor 文件夹 )5 导入：lang、plugins、themes、kindeditor.js/kindeditor-min.js-->放在editor文件夹下6 2.在页面上引入相关的js&css文件7

8

9

10

11 3.在页面提供标签

12 KindEditor.ready(function(K) {13 window.editor = K.create("#ta");14 4.定制工具栏按钮显示：15 KindEditor.ready(function(K) {16 window.editor = K.create("#ta", {17 items: [‘source‘, ‘|‘, ‘undo‘, ‘redo‘, ‘|‘, ‘preview‘, ‘print‘, ‘template‘, ‘code‘, ‘cut‘, ‘copy‘, ‘paste‘,18 ‘plainpaste‘, ‘wordpaste‘, ‘|‘, ‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘,19 ‘justifyfull‘, ‘insertorderedlist‘, ‘insertunorderedlist‘, ‘indent‘, ‘outdent‘, ‘subscript‘,20 ‘superscript‘, ‘clearhtml‘, ‘quickformat‘, ‘selectall‘, ‘|‘, ‘fullscreen‘, ‘/‘,21 ‘formatblock‘, ‘fontname‘, ‘fontsize‘, ‘|‘, ‘forecolor‘, ‘hilitecolor‘, ‘bold‘,22 ‘italic‘, ‘underline‘, ‘strikethrough‘, ‘lineheight‘, ‘removeformat‘, ‘|‘, ‘image‘, ‘multiimage‘,23 ‘flash‘, ‘media‘, ‘insertfile‘, ‘table‘, ‘hr‘, ‘emoticons‘, ‘baidumap‘, ‘pagebreak‘,24 ‘anchor‘, ‘link‘, ‘unlink‘, ‘|‘, ‘about‘

25 ],allowFileManager:true,26 uploadJson:"../../image_upload.action",27 fileManagerJson:"../../image_manager.action"

28 });29 5.上传图片与图片管理功能实现：30 页面提供对应方法：31 allowFileManager、uploadJson、fileManagerJson-->发送请求到后台action处理：32 //提供属性注入

33 privateFile imgFile;34 privateString imgFileFileName;35 privateString imgFileContentType;36 //图片上传方法

37 @Action(value = "image_upload", results = { @Result(name = "success", type = "json") })38 public String uploadImg() throwsIOException {39 System.out.println("file:" +imgFile);40 System.out.println("文件名称:" +imgFileFileName);41 System.out.println("文件类型:" +imgFileContentType);42 String savePath =ServletActionContext.getServletContext().getRealPath(43 "/upload/");44 String saveUrl =ServletActionContext.getRequest().getContextPath()45 +savePath;46 //生成随即图片名称

47 UUID randomUUID =UUID.randomUUID();48 String ext =imgFileFileName49 .substring(imgFileFileName.lastIndexOf("."));50 String randomUrl = randomUUID +ext;51 //保存图片(绝对的路径和)

52 FileUtils.copyFile(imgFile, new File(savePath + "/" +randomUrl));53 //返回浏览器数据(文件上传成功了还是失败了)

54 Map map = new HashMap();55 map.put("error", 0);56 map.put("url", saveUrl +randomUrl);57 ServletActionContext.getContext().getValueStack().push(map);58 returnSUCCESS;59 }60

61 //图片管理方法

62 @Action(value = "image_manager", results = { @Result(name = "success", type = "json") })63 publicString manager() {64 //根目录路径(绝对路径)

65 String rootPath =ServletActionContext.getServletContext().getRealPath(66 "/")67 + "upload/";68 //根目录URL(绝对路径)

69 String rootUrl =ServletActionContext.getRequest().getContextPath()70 + "/upload/";71 List> fileList = new ArrayList>();72 //当前上传目录

73 File currentPathFile = newFile(rootPath);74 //图片的扩展名

75 String[] fileTypes = new String[] { "gif", "jpg", "jpeg", "png", "bmp"};76

77 if (currentPathFile.listFiles() != null) {78 //遍历目录取的文件信息

79 for(File file : currentPathFile.listFiles()) {80 Map hash = new HashMap();81 String fileName =file.getName();82 if(file.isDirectory()) {83 hash.put("is_dir", true);84 hash.put("has_file", (file.listFiles() != null));85 hash.put("filesize", 0L);86 hash.put("is_photo", false);87 hash.put("filetype", "");88 } else if(file.isFile()) {89 String fileExt =fileName.substring(90 fileName.lastIndexOf(".") + 1).toLowerCase();91 hash.put("is_dir", false);92 hash.put("has_file", false);93 hash.put("filesize", file.length());94 hash.put("is_photo", Arrays.asList(fileTypes)95 .contains(fileExt));96 hash.put("filetype", fileExt);97 }98 hash.put("filename", fileName);99 hash.put("datetime",100 new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(file101 .lastModified()));102 fileList.add(hash);103 }104 }105 Map result = new HashMap();106 result.put("moveup_dir_path", "");107 result.put("current_dir_path", rootPath);108 result.put("current_url", rootUrl);109 result.put("total_count", fileList.size());110 result.put("file_list", fileList);111 ActionContext.getContext().getValueStack().push(result);112 returnSUCCESS;113 }114