zoukankan      html  css  js  c++  java
  • UEditor中上传图片的步骤

    1. 找到ueditor中ueditor.config.js 修改serverUrl属性值,
        serverUrl: URL + "jsp/controller.jsp"
        
        toolbars定义的是编辑器里显示的button 按钮组
        
     2.
     将ueditor/jsp中lib下的jar拷贝到WEB——INF下的lib下ueditor.config.js中的controller。jsp才可以用。
     
     
     3.更改ueditor/1.4.3/dialogs/image下image.js文件中的actionUrl属性值,
     actionUrl = "http://localhost:8081/sys/others/uploadup",
     这个地址是自己上传图片的地址。
     
     4.关注uploadSuccess这个方法,这个是上传图片后的回调函数。ret是返回的数据,返回数据是json串,参考jsp/src/com/baidu/ueditor/defice下的State和BaseState类。
     
     uploader.on('uploadSuccess', function (file, ret) {
                    var $file = $('#' + file.id);
                    try {
                        var responseText = (ret._raw || ret),
                            json = utils.str2json(responseText);
                        if (json.state == 'SUCCESS') {
                            _this.imageList.push(json);
                            $file.append('<span class="success"></span>');
                        } else {
                            $file.find('.error').text(json.state).show();
                        }
                    } catch (e) {
                        $file.find('.error').text(lang.errorServerUpload).show();
                    }
                });
                
     5.关注getInserList函数这个函数循环imageList中的数据,json串中key值是url,value值是url地址。
     
     getInsertList: function () {
                var i, data, list = [],
                    align = getAlign(),
                    prefix = editor.getOpt('imageUrlPrefix');
                for (i = 0; i < this.imageList.length; i++) {
                    data = this.imageList[i];
                    list.push({
                        src: prefix + data.url,
                        _src: prefix + data.url,
                        title: data.title,
                        alt: data.original,
                        floatStyle: align
                    });
                }
                return list;
            }
            
            
        6.上传图片的后台代码段。
        这里的upfile 是前端上传的所有图片的 对象
        state 是引用的是jsp/src/com/baidu/ueditor/defice下的State和BaseState中的类
        putInfo方法设置返回数据,这里key值必须是“url”
        
         /**
         * 上传图片
         */
        @RequestMapping(value = "/others/uploadup", method = RequestMethod.POST)
        @ResponseBody
        public String uploadup(MultipartHttpServletRequest  request){
            State state = null;
            state = new BaseState(true);
            List<MultipartFile> files = (List<MultipartFile>) request.getFiles("upfile");
            try {
                if(files!=null){
                    Integer id = new Integer(0);
                    for(int i=0;i<files.size();i++){  
                        MultipartFile file = files.get(i);  
                         id = othersManageService.insertImages(file);
                         ImagesDetail imd = othersManageService.findImagesById(id);
                         state.putInfo("url", imd.getUrl());
                    }
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
            String resultState = state.toJSONString();
            return resultState;
        }
       

  • 相关阅读:
    Prometheus 简介
    Cassandra spring data 试用
    nginx fastcgi 优化
    mysql 用户管理
    js之iframe子页面与父页面通信
    ORACLE中SID和SERVICE_NAME的区别
    报“ Got minus one from a read call”的错误
    linux下重启oracle服务:监听器和实例
    25种提高网页加载速度的方法和技巧
    如何让你的网页加载时间降低到 1s 内
  • 原文地址:https://www.cnblogs.com/QAZLIU/p/6805516.html
Copyright © 2011-2022 走看看