JavaScript

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

blob.png

blob.png


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

然后仔细看了一下默认 单图上传的功能 ?发现是采用 表单input file 放入iframe亚博可以人工存款吗 上传的

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

所以决定采用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

发表评论

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