Archive for the category: 6.前端开发

最近使用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