最近使用java开发一个APP应用的管理系统后台,涉及到编辑信息上传图片的功能,这里使用了UE编辑器,国产的;
UE上传图片的功能集成在了一个叫做image.js的文件中:
/*
* 本地上传
* */
var Upload = {
showCount: 0,
uploadTpl: '<div class="edui-image-upload%%">' +
'<span class="edui-image-icon"></span>' +
'<form class="edui-image-form" method="post" enctype="multipart/form-data" target="up">' +
'<input style=\"filter: alpha(opacity=0);\" class="edui-image-file" type="file" hidefocus name="upfile" accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"/>' +
'</form>' +
'</div>',
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;
//这里使用一个过滤的方法,java后台返回的是json数据,但是到这里发现有<pre>的标签;
log(r)
if(r.indexOf("</pre>") > 0){
var _start = r.indexOf(">") + 1;
var _end = r.indexOf("<",_start);
r = r.substring(_start,_end);
log(r)
}
//过滤结束
try{
var json = eval('('+r+')');
//这里调用了callback的方法,第3个参数是传递过去的图片地址,由服务器返回;
//第4个参数是服务器返回的状态码
Base.callback(me.editor, me.dialog, json.data.url, json.code);
}catch (e){
var lang = me.editor.getLang('image');
Base.callback(me.editor, me.dialog, '', (lang && lang.uploadError) || 'Error!');
}
}}
图片上传成功,调用了callback的方法处理图片,需要作小小的改动:
callback: function (editor, $w, url, code) {
//这里做了小小的改动,原代码是判断success字符串,由于我的Java返回的是一个类似于{code:1,error:error}对象,所以我改成了int类型作为判断,之后的代码都不需要操作了。
if (code == 1) {
//显示图片计数+1
Upload.showCount++;
var $img = $("<img src='" + editor.options.imagePath + url + "' class='edui-image-pic' />"),
$item = $("<div class='edui-image-item edui-image-upload-item'><div class='edui-image-close'></div></div>").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( code );
window.setTimeout( function () {
currentDialog.hideTip();
}, 3000 );
}
Upload.toggleMask();
}
接下来就是映射tomcat虚拟目录,在tomcat的目录下找到conf目录:
/home/apache-tomcat-8.0.45/conf/Catalina/localhost
在localhost目录下创建一个xml文件,文件的名字会与url的路径同步,所以取名字要注意点,假如你创建了一个
upload.xml的文件,里面的内容是:
<?xml version=”1.0″ encoding=”UTF-8″?>
<!–文件名跟url路径需保持一致–>
<!–如果文件名:upload.xml,那么你访问的url地址应该是:http://ip:port/upload/images…. –>
<!–http://localhost:8081/upload/images/20170901/1504228001551.jpg–>
<Context
docBase=”/upload”
reloadable=”true”>
</Context>
那么你访问这个目录下的资源时,url应该输入:
http://ip:port/upload/resrouce
近期评论