zoukankan      html  css  js  c++  java
  • 在线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(file
    101                                     .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                 
  • 相关阅读:
    router使用以及vue的动画效果
    配置wbepack
    Axios插件和loading的实现
    自定义组件的 v-model
    组件模块化使用
    组件基础
    vue的使用1
    solt插槽的使用。
    Vue的使用
    Vue的router使用
  • 原文地址:https://www.cnblogs.com/yshang/p/8087944.html
Copyright © 2011-2022 走看看