JavaScript

百度UMeditor加入多图上传的方法

blob.png

blob.png


默认百度UM是没有多图上传的,  这个确实没办法满足用户的需求. 

然后仔细看了一下默认 单图上传的功能  发现是采用 表单input file 放入iframecc国际彩球平台_cc国际总代理提成_cc国际彩球骗局 上传的

这种方案对浏览器兼容很好.  本身打算也用这种方法做多图上传的. 但还是放弃了

所以决定采用HTML5的FormData AJAX上传图片了!

由于写好了JS 替换下就行了

dialogs/image/image.js

(function () {

    var utils = UM.utils,
        browser = UM.browser,
        Base = {
        checkURL: function (url) {
            if(!url)    return false;
            url = utils.trim(url);
            if (url.length <= 0) {
                return false;
            }
            if (url.search(/http:\/\/|https:\/\//) !== 0) {
                url += 'http://';
            }

            url=url.replace(/\?[\s\S]*$/,"");

            if (!/(.gif|.jpg|.jpeg|.png)$/i.test(url)) {
                return false;
            }
            return url;
        },
        getAllPic: function (sel, $w, editor) {
            var me = this,
                arr = [],
                $imgs = $(sel, $w);

            $.each($imgs, function (index, node) {
                $(node).removeAttr("width").removeAttr("height");

//                if (node.width > editor.options.initialFrameWidth) {
//                    me.scale(node, editor.options.initialFrameWidth -
//                        parseInt($(editor.body).css("padding-left"))  -
//                        parseInt($(editor.body).css("padding-right")));
//                }

                return arr.push({
                    _src: node.src,
                    src: node.src
                });
            });

            return arr;
        },
        scale: function (img, max, oWidth, oHeight) {
            var width = 0, height = 0, percent, ow = img.width || oWidth, oh = img.height || oHeight;
            if (ow > max || oh > max) {
                if (ow >= oh) {
                    if (width = ow - max) {
                        percent = (width / ow).toFixed(2);
                        img.height = oh - oh * percent;
                        img.width = max;
                    }
                } else {
                    if (height = oh - max) {
                        percent = (height / oh).toFixed(2);
                        img.width = ow - ow * percent;
                        img.height = max;
                    }
                }
            }

            return this;
        },
        close: function ($img) {

            $img.css({
                top: ($img.parent().height() - $img.height()) / 2,
                left: ($img.parent().width()-$img.width())/2
            }).prev().on("click",function () {

                if ( $(this).parent().remove().hasClass("edui-image-upload-item") ) {
                    //显示图片计数-1
                    Upload.showCount--;
                    Upload.updateView();
                }

            });

            return this;
        },
        createImgBase64: function (img, file, $w) {
            if (browser.webkit) {
                //Chrome8+
                img.src = window.webkitURL.createObjectURL(file);
            } else if (browser.gecko) {
                //FF4+
                img.src = window.URL.createObjectURL(file);
            } else {
                //实例化file reader对象
                var reader = new FileReader();
                reader.onload = function (e) {
                    img.src = this.result;
                    $w.append(img);
                };
                reader.readAsDataURL(file);
            }
        },
        callback: function (editor, $w, url, state) {

            if (state == "SUCCESS") {
                //显示图片计数+1
                Upload.showCount++;
                var $img = $(""),
                    $item = $("
").append($img);                 if ($(".edui-image-upload2", $w).length < 1) {                     $(".edui-image-content", $w).append($item);                     Upload.render(".edui-image-content", 2)                         .config(".edui-image-upload2");                 } else {                     $(".edui-image-upload2", $w).before($item).show();                 }                 $img.on("load", function () {                     Base.scale(this, 120);                     Base.close($(this));                     $(".edui-image-content", $w).focus();                 });             } else {                 currentDialog.showTip( state );                 window.setTimeout( function () {                     currentDialog.hideTip();                 }, 3000 );             }             Upload.toggleMask();         }     };     /*      * 本地上传      * */     var Upload = {         showCount: 0,         uploadTpl: '
' +             '' +             '
' +             '' +             '
' +             '
',         init: function (editor, $w) {             var me = this;             me.editor = editor;             me.dialog = $w;             me.render(".edui-image-local", 1);             me.config(".edui-image-upload1");             me.submit();             me.drag();             $(".edui-image-upload1").hover(function () {                 $(".edui-image-icon", this).toggleClass("hover");             });             if (!(UM.browser.ie && UM.browser.version <= 9)) {                 $(".edui-image-dragTip", me.dialog).css("display", "block");             }             return me;         },         render: function (sel, t) {             var me = this;             $(sel, me.dialog).append($(me.uploadTpl.replace(/%%/g, t)));             return me;         },         config: function (sel) {             var me = this,                 url=me.editor.options.imageUrl;             url=url + (url.indexOf("?") == -1 ? "?" : "&") + "editorid="+me.editor.id;//初始form提交地址;             $("form", $(sel, me.dialog)).attr("action", url);             return me;         },         uploadComplete: function(r){             var me = this;             try{                 var json = eval('('+r+')');                 Base.callback(me.editor, me.dialog, json.url, json.state);             }catch (e){                 var lang = me.editor.getLang('image');                 Base.callback(me.editor, me.dialog, '', (lang && lang.uploadError) || 'Error!');             }         },         submit: function (callback) {             var me = this,                 input = $( ''),                 input = input[0];             $(me.dialog).delegate( ".edui-image-file", "change", function ( e ) { if (window.applicationCache) {//判断HTML5 var fileList = document.getElementById('um_up').files; $.each(fileList, function (i, f) { //创建图片的base64 var xhr = new XMLHttpRequest(); xhr.open("post", me.editor.getOpt('imageUrl') + "?type=ajax", true); xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); //模拟数据 var fd = new FormData(); fd.append("photo", f); //fd.append(me.editor.getOpt('imageFieldName'), f); xhr.send(fd); xhr.addEventListener('load', function (e) { var r = e.target.response, json; me.uploadComplete(r); }); hasImg = true; }); }else{ if ( !this.parentNode ) { return; } $('').insertBefore(me.dialog).on('load', function(){ var r = this.contentWindow.document.body.innerHTML; if(r == '')return; me.uploadComplete(r); $(this).unbind('load'); $(this).remove(); }); $(this).parent()[0].submit(); } //console.log( document.getElementById('um_up').files);                 //                 Upload.updateInput( input );                 me.toggleMask("Loading....");                 callback && callback();             });             return me;         },         //更新input         updateInput: function ( inputField ) {             $( ".edui-image-file", this.dialog ).each( function ( index, ele ) {                 ele.parentNode.replaceChild( inputField.cloneNode( true ), ele );             } );         },         //更新上传框         updateView: function () {             if ( Upload.showCount !== 0 ) {                 return;             }             $(".edui-image-upload2", this.dialog).hide();             $(".edui-image-dragTip", this.dialog).show();             $(".edui-image-upload1", this.dialog).show();         },         drag: function () {             var me = this;             //做拽上传的支持             if (!UM.browser.ie9below) {                 me.dialog.find('.edui-image-content').on('drop',function (e) {                     //获取文件列表                     var fileList = e.originalEvent.dataTransfer.files;                     var img = document.createElement('img');                     var hasImg = false;                     $.each(fileList, function (i, f) {                         if (/^image/.test(f.type)) {                             //创建图片的base64                             Base.createImgBase64(img, f, me.dialog);                             var xhr = new XMLHttpRequest();                             xhr.open("post", me.editor.getOpt('imageUrl') + "?type=ajax", true);                             xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");                             //模拟数据                             var fd = new FormData();                             fd.append(me.editor.getOpt('imageFieldName'), f);                             xhr.send(fd);                             xhr.addEventListener('load', function (e) {                                 var r = e.target.response, json;                                 me.uploadComplete(r);                                 if (i == fileList.length - 1) {                                     $(img).remove()                                 }                             });                             hasImg = true;                         }                     });                     if (hasImg) {                         e.preventDefault();                         me.toggleMask("Loading....");                     }                 }).on('dragover', function (e) {                         e.preventDefault();                     });             }         },         toggleMask: function (html) {             var me = this;             var $mask = $(".edui-image-mask", me.dialog);             if (html) {                 if (!(UM.browser.ie && UM.browser.version <= 9)) {                     $(".edui-image-dragTip", me.dialog).css( "display", "none" );                 }                 $(".edui-image-upload1", me.dialog).css( "display", "none" );                 $mask.addClass("edui-active").html(html);             } else {                 $mask.removeClass("edui-active").html();                 if ( Upload.showCount > 0 ) {                     return me;                 }                 if (!(UM.browser.ie && UM.browser.version <= 9) ){                     $(".edui-image-dragTip", me.dialog).css("display", "block");                 }                 $(".edui-image-upload1", me.dialog).css( "display", "block" );             }             return me;         }     };     /*      * 网络图片      * */     var NetWork = {         init: function (editor, $w) {             var me = this;             me.editor = editor;             me.dialog = $w;             me.initEvt();         },         initEvt: function () {             var me = this,                 url,                 $ele = $(".edui-image-searchTxt", me.dialog);             $(".edui-image-searchAdd", me.dialog).on("click", function () {                 url = Base.checkURL($ele.val());                 if (url) {                     $("").on("load", function () {                         var $item = $("
").append(this);                         $(".edui-image-searchRes", me.dialog).append($item);                         Base.scale(this, 120);                         $item.width($(this).width());                         Base.close($(this));                         $ele.val("");                     });                 }             })                 .hover(function () {                     $(this).toggleClass("hover");                 });         }     };     var $tab = null,         currentDialog = null;     UM.registerWidget('image', {         tpl: "" +             "
" +             "" +             "
" +             "
" +             "
" +             "
" +             "
<%=lang_input_dragTip%>
" +             "
" +             "
" +             "
" +             "" +             "
<%=lang_btn_add%>
" +             "
" +             "
" +             "
" +             "
" +             "
",         initContent: function (editor, $dialog) {             var lang = editor.getLang('image')["static"],                 opt = $.extend({}, lang, {                     image_url: UMEDITOR_CONFIG.UMEDITOR_HOME_URL + 'dialogs/image/'                 });             Upload.showCount = 0;             if (lang) {                 var html = $.parseTmpl(this.tpl, opt);             }             currentDialog = $dialog.edui();             this.root().html(html);         },         initEvent: function (editor, $w) {             $tab = $.eduitab({selector: ".edui-image-wrapper"})                 .edui().on("beforeshow", function (e) {                     e.stopPropagation();                 });             Upload.init(editor, $w);             NetWork.init(editor, $w);         },         buttons: {             'ok': {                 exec: function (editor, $w) {                     var sel = "",                         index = $tab.activate();                     if (index == 0) {                         sel = ".edui-image-content .edui-image-pic";                     } else if (index == 1) {                         sel = ".edui-image-searchRes .edui-image-pic";                     }                     var list = Base.getAllPic(sel, $w, editor);                     if (index != -1) {                         editor.execCommand('insertimage', list);                     }                 }             },             'cancel': {}         },         width: 700,         height: 408     }, function (editor, $w, url, state) {         Base.callback(editor, $w, url, state)     }) })();


2 条评论

  1. kkmc说道:

    6666666666666

  2. kkmc说道:

    @kkmc 66666

发表评论

你需要登录后才可进行发表