在线HTML文档编辑器使用入门之图片上传与图片管理的实现

 ?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 ????????<!-- 导入Kindeditor相关文件 --> ?8 ????????<script type="text/javascript" src="../../editor/lang/zh_CN.js"></script> ?9 ????????<script type="text/javascript" src="../../editor/kindeditor.js"></script> 10 ????????<link rel="stylesheet" href="../../editor/themes/default/default.css" /> 11 ????3.在页面提供标签<textarea id="ta" name="ta"></textarea> 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 ????????private File imgFile; 34 ????????private String imgFileFileName; 35 ????????private String imgFileContentType; 36 ????????//图片上传方法 37 ????????@Action(value = "image_upload", results = { @Result(name = "success", type = "json") }) 38 ????????public String uploadImg() throws IOException { 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 = imgFileFileName 49 ????????????????????.substring(imgFileFileName.lastIndexOf(".")); 50 ????????????String randomUrl = randomUUID + ext; 51 ????????????// 保存图片(绝对的路径和) 52 ????????????FileUtils.copyFile(imgFile, new File(savePath + "/" + randomUrl)); 53 ????????????// 返回浏览器数据(文件上传成功了还是失败了) 54 ????????????Map<String, Object> map = new HashMap<String, Object>(); 55 ????????????map.put("error", 0); 56 ????????????map.put("url", saveUrl + randomUrl); 57 ????????????ServletActionContext.getContext().getValueStack().push(map); 58 ????????????return SUCCESS; 59 ????????} 60 ?61 ????????//图片管理方法 62 ????????@Action(value = "image_manager", results = { @Result(name = "success", type = "json") }) 63 ????????public String manager() { 64 ????????????// 根目录路径(绝对路径) 65 ????????????String rootPath = ServletActionContext.getServletContext().getRealPath( 66 ????????????????????"/") 67 ????????????????????+ "upload/"; 68 ????????????// 根目录URL(绝对路径) 69 ????????????String rootUrl = ServletActionContext.getRequest().getContextPath() 70 ????????????????????+ "/upload/"; 71 ????????????List<Map<String, Object>> fileList = new ArrayList<Map<String, Object>>(); 72 ????????????// 当前上传目录 73 ????????????File currentPathFile = new File(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<String, Object> hash = new HashMap<String, Object>(); 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.<String> 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<String, Object> result = new HashMap<String, Object>();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 ????????????return SUCCESS;113 ????????}114 ????????????????