百度编辑器php版本单图片上传错误,关于百度编辑器(UMeditor)单个图片上传跨域错误的解决方案...

使用百度(UMeditor)编辑器单个跨域上传图片会遇到一下错误:

Uncaught DOMException: Blocked a frame with origin "........." from accessing a cross-origin frame.

这是因为UMeditor单个上传图片时会用到iframe,而出现的跨域错误.详见image.js中submit方法

submit: function(callback) {var me = this,

input= $( ''),

input= input[0];

$(me.dialog).delegate(".edui-image-file", "change", function( e ) {if ( !this.parentNode ) {return;

}

$('').insertBefore(me.dialog).on('load', function(){

console.log(this.contentWindow);var r = this.contentWindow.document.body.innerHTML;if(r == '')return;

me.uploadComplete(r);

$(this).unbind('load');

$(this).remove();

});

$(this).parent()[0].submit();

Upload.updateInput( input );

me.toggleMask("Loading....");

callback&&callback();

});returnme;

}

在网上看了很多关于解决跨域的方案,都略显复杂,最后自己参照拖拽上传图片的方法将submit方法改写,达到一劳永逸的目的.

修改方式如下:

submit: function(callback) {var me = this,

input= $( ''),

input= input[0];

$(me.dialog).delegate(".edui-image-file", "change", function( e ) {if ( !this.parentNode ) {return;

}var xhr = newXMLHttpRequest();

xhr.open("post", me.editor.getOpt('imageUrl') + "?type=ajax", true);//xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

var fd = newFormData();fd.append(me.editor.getOpt('imageFieldName'), event.target.files[0]);

xhr.send(fd);

xhr.addEventListener('load', function(e) {var r =e.target.response, json;

me.uploadComplete(r);

$(this).unbind('load');

$(this).remove();

});

Upload.updateInput( input );

me.toggleMask("Loading....");

callback&&callback();

});returnme;

}

按照以上方式修改之后,只要上传服务器端支持跨域,就完美解决了客户端Uncaught DOMException: Blocked a frame with origin "........." from accessing a cross-origin frame.错误

PS:兼容性会变差.