参照网络上流行的提取单图上传功能的方法并加以修改，主要通过创建提取的通用上传图片的js文件（custom.js）和简单修改UEditor的ueditor.all.js文件。
1）在自定义js custom.js中添加方法
var _editor = UE.getEditor(‘editor_img‘, {toolbars: [[‘simpleupload‘]]});
_editor.ready(function () {
//设置编辑器不可用
//_editor.setDisabled(); 这个地方要注意 一定要屏蔽
//隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
//_editor.hide();
//侦听图片上传
_editor.addListener(‘contentChange‘, function (editor) {
//获取编辑器中的内容（html 代码）
var img = UE.getEditor(‘editor_img‘).getPlainTxt();
if (img.replace(/[\r\n]/g, "") != "") {
//判断是否是单图片上传，如果是单传不做任何处理，等待回调函数再次调用。
if (img.indexOf("loadingclass") == -1) {
//清空编辑器中的内容，以便下一次添加图片。
UE.getEditor(‘editor_img‘).execCommand(‘cleardoc‘);
//调用callbackImg获取懂图片名称
if (typeof callbackImg === "function") {
eval("callbackImg(‘" + $(img).attr("src") + "‘)");
}
}
}
});
});
//单传图片开始上传,显示等待。
function preUploadSingleImg() {
if ($("#loading").length > 0) {
$("#loading").html("<img style=‘margin:38px auto;‘ src=‘lib/ueditor/themes/default/images/loading.gif‘>");
}
}
//单传图片回调,然后清理内容,在清理内容会自动调用contentChange事件，然后再获取上传文件的文件名。
function uploadSingleImgCallback() {
UE.getEditor(‘editor_img‘).execCommand(‘cleardoc‘);
}
//上传完成后返回图片地址
function callbackImg(imgSrc) {
$("#loading").html(‘<img style="height: 100px;width: 100px;" src="‘ + imgSrc + ‘"/>‘);
}
//上传点击事件
function uploadImg() {
var file = $($("iframe").get(0).contentWindow.document).find("input").get(0);
file.onchange = function () {};
//判断浏览器是否是IE
if (document.all) {
file.click();
} else {
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, true);
file.dispatchEvent(evt);
}
}
|
2）修改ueditor.all.js源码，找到上传开始和上传完成的事件，在24466行和24488行分别调用js方法preUploadSingleImg()和uploadSingleImgCallback()。
if (typeof preUploadSingleImg === "function") {
preUploadSingleImg();
}
function callback(){
try{
var link, json, loader,
body = (iframe.contentDocument || iframe.contentWindow.document).body,
result = body.innerText || body.textContent || ‘‘;
json = (new Function("return " + result))();
link = me.options.imageUrlPrefix + json.url;
if(json.state == ‘SUCCESS‘ && json.url) {
loader = me.document.getElementById(loadingId);
loader.setAttribute(‘src‘, link);
loader.setAttribute(‘_src‘, link);
loader.setAttribute(‘title‘, json.title || ‘‘);
loader.setAttribute(‘alt‘, json.original || ‘‘);
loader.removeAttribute(‘id‘);
domUtils.removeClasses(loader, ‘loadingclass‘);
} else {
showErrorLoader && showErrorLoader(json.state);
}
//单独提取上传回调函数。
if (typeof uploadSingleImgCallback === ‘function‘) {
uploadSingleImgCallback();
}
}catch(er){
showErrorLoader && showErrorLoader(me.getLang(‘simpleupload.loadError‘));
}
form.reset();
domUtils.un(iframe, ‘load‘, callback);
}
|
3）前台页面代码。
上传头像示例：<br> <div id="editor_img" style="display: none;"></div> <div id="loading" style="height: 100px;width: 100px;cursor:pointer;float:left;border:1px solid #000;text-align: center;" onclick="uploadImg()"></div> <script type="text/javascript" src="./lib/ueditor/custom.js"></script> |
时间： 2024-11-05 12:22:21