单独使用ueditor的图片上传功能，同时获得上传图片地址和缩略图

单独使用ueditor图片上传功能参考我的这篇文章
http://blog.csdn.net/kh717586350/article/details/79041939

上篇文章讲述了如何获得上传到服务器后的图片信息列表，处理完这个功能后觉得需要显示一个已上传图片列表，但是使用图片原始地址页面加载很慢，W3C 特别说明img标签的width和height并不能使图片尺寸降低，需要使用工具改变其分辨率。由此想到了ueditor本身上传dialog的时候就有缩略图，何不将其移植过来，当然说的是很简单，不过由于本人水平不行，捣鼓了半天image.js后，添加了部分代码才解决
下面是修改步骤：

第一步

大约300行左右，添加代码中的一行：

UploadImage.prototype = {
        init: function () {
            this.myImageThumbList = [];     //自己添加
            this.imageList = [];
            this.initContainer();
            this.initUploader();
        },

主要作用是让myImageThumbList 来接收压缩后的图片src数组

第二步

大约454行左右，在压缩图片函数中，添加代码中的一行：

uploader.makeThumb(file, function (error, src) {
    if (error || !src) {
        $wrap.text(lang.uploadNoPreview);
    } else {
        var $img = $('<img src="' + src + '">');
        _this.myImageThumbList.push({"src":src});    //自己添加
        $wrap.empty().append($img);
        $img.on('error', function () {
            $wrap.text(lang.uploadNoPreview);
        });
    }
    }, thumbnailWidth, thumbnailHeight);

主要作用是每次上传图片的时候将缩略图src存到数组myImageThumbList中

第三步

大约787行左右，在获取插入图片信息列表函数中，添加代码中的一行：

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,
            thumbSrc: this.myImageThumbList[i].src      //自己添加
        });
    }
    return list;
}

主要作用是将缩略图信息放到list中去，用list同一接收图片信息和缩略图src

第四步

在107行也就是if(list) {}函数中添加回调函数

editor.fireEvent("beforeInsertImage", list);    //自己定义  大约107行，在if(list)函数中添加

第五步

前天调用函数

//监听多图上传组件的插入动作
uploadEditor.ready(function () {
    uploadEditor.hide();
    // 监听插入图片,以及执行的时间,改动image.js,获得上传图片信息和缩略图数组(自己在image.js中添加方法)
    uploadEditor.addListener('beforeinsertimage', function (t, imageList) {  
        var imageHtml = '';
           for(var i = 0; i < imageList.length; i++){   
               imageHtml += '<li><p><img src="'+imageList[i].thumbSrc+'" alt="'+imageList[i].alt+'" value="' +imageList[i].src+ '"></p></li>';
           }
        $("#uploadImgsWrap").html(imageHtml);
          });
});

当然可以再写一个函数专门获取缩略图src,这样就不会改动list结构了，不过当时弄了好长时间都没解决这个错误：在前台遍历myImageThumbList报错说找不到length属性
你需要写一个函数如：
getMyImageThumbList: function() {
    return this.myImageThumbList;
}
和解决独立获得图片信息一样，需要dialog.onok这个函数中添加回调函数，如下代码:
if(list) {
    editor.fireEvent("getMyImageThumbList", remoteImage.getMyImageThumbList()); //自己定义  大约107行，在if(list)函数中添加
    editor.execCommand('insertimage', list);
    remote && editor.fireEvent("catchRemoteImage");
}

转载请标注：http://blog.csdn.net/KH717586350