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;
    }

时间: 2024-11-07 15:56:51

UEditor中上传图片的步骤的相关文章

解决ueditor中没法动态配置imageurlprefix的方法

修改背景,由于后台图片是上传到挂载的静态资源磁盘中去,前台用独立域名访问 所以在ueditor中显示图片前缀,只能在 "imageUrlPrefix": 中配置域名,配上域名就遇上了麻烦,开发环境,测试环境,生产环境的域名都不一样: 而ueditor的在配置项放在config.json中,如下: 造成的问题就是每次提交版本控制的时候,config.json文件都要忽略提交,并且再三确认是否提交被提交了,提交后就会导致测试环境上传图片后,图片域名前缀显示的是生产环境的域名,图片直接不可显

dedecms整合百度编辑器(Ueditor)之上传图片加水印的办法

Ueditor抓取远程图片加水印方法 打开getRemoteImage.php, 找到://远程抓取图片配置 在上面添加: require_once('../../../dede/config.php');//dede为你的后台目录 require_once(DEDEADMIN."/inc/inc_archives_functions.php"); 继续修改getRemoteImage.php, 找到: fwrite( $fp2 , $img ); 在下面添加: @WaterImg($

为百度UEDITOR编辑器上传图片添加水印

form:http://www.uphtm.com/php/255.html UEDITOR编辑器上传图片是自动提取的,但是图片没有水印功能,下面小编和各位一起来看看. UEditor编辑器没有上传图片加水印的功能,需要进行二次开发,本例是在PHPCMS系统中对百度编辑器进行二次开发,添加上传图片加水印功能. 首先打开UEditor编辑器文件目录的php文件夹,打开Uploader.class.php,把PHPCMS添加水印的方法复制过来,加到这个类所有成员方法最后面,然后进行修改如下: //图

ueditor1.3.6jsp版在struts2应用中上传图片报&quot;未找到上传文件&quot;解决方案

摘要: ueditor1.3.6jsp版在struts2应用中上传图片报"未找到上传文件"解决方案 在struts2应用中使用ueditor富文本编辑器上传图片或者附件时,即使配置好了上传路径信息,也会出现"未找到上传文件"的错误提示,出先该问题的原因是:在配置struts过滤器,过滤路径设置/*方式时,由于struts2框架默认使用apache的Commons FileUpload组件和内建的FileUploadInterceptor拦截器实现上传,会将reque

从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文本web编辑器,而且全中文API和注释,方便学习和使用.特别是图片上传查看及涂鸦功能极为喜欢,但是有很多情况我们并不需要Web编辑器,而只需要图片上传.那么问题来了,提取图片上传哪家强..... 网上有很多图片上传的控件.插件.但都不是那么的完美,有的只有一张图片上传不包含批量上传,有的没有图片查看

Ueditor中代码的高亮和背景在前端页面的实现

首先废话就不多说,这个富文本编辑器的下载和js等基本文件的导入略. 我的最终目标是这样的,我们在页面中的富文本框中输入代码,希望它能够被后台接受.存入数据库,当通过服务器将这些代码再一次显示在前台的页面上的时候,我们希望所呈现的是如下的情况: 就是说需要对代码的背景和高亮的部分的样式也进行保存.我的解决过程是这样的(假设在demo.html中进行输入,在demo.php中进行处理和呈现): 1. 首先在网上查找相关信息,发现需要第三方插件,而这第三方插件就在我们的ueditor的下载包中,ued

java配置ueditor中解决“未找到上传文件”错误提示

ueditor是一个功能十分强大的在线文本编辑器,但是在ssh框架中,确切的说实在struts2中由于其拦截器需要对request,session对象进行重新封装,这个过程中会把request对象中保存的一些内容清空,所以会导致ueditor的上传功能获取不到需要上传的内容导致“未找到上传文件”的错误! 参考网上资料和自己实验,最终的解决思路是,重写struts2中的一个转换的类,然后配置struts2使用我们重写的这个类.由于我们的工程中可能会有其他的上传等功能,为了不影响其他功能的时候,还需

大开测试:性能- VuGen中支持哪些步骤类型(连载12)

7.12  VuGen中支持哪些步骤类型 1.问题提出 VuGen中支持哪些步骤类型? 2.问题解答 VuGen中支持下列步骤类型,如表7-3所示. 表7-3                                                  VuGen支持步骤类型列表 步 骤 类 型 描    述 服务 服务步骤是一个函数,它不会在Web应用程序上下文中进行任何更改.更确切地说,服务步骤执行自定义任务(如设置代理服务器).提供授权信息以及发出自定义的标头 URL 在键入URL或者

在VS2013 MVC项目中上传图片

之前做网站项目时,凡遇到保存图片的,我都将图片上传后存储在服务器的本地文件夹中,在一个Controller的Action中,类似操作如下所示: public ActionResult UpLoad(HttpPostedFileBasearImg) {             //保存图片            if (arImg != null)            {                 string uploadName =arImg.FileName;//获取待上传图片的完整