0X1 摘要

异步文件上传，图片上传完毕后响应 {"state":"","url":""}

0X2 使用

需要上传的div加上样式uploadimage 如:<div class="uploadimage">点我上传</div>

imgUpload.config({\"action\":\".....\"});//图片接收路径
imgUpload.Load();//加载插件

0X3 源码

//需要上传图片的框体加上class=>uploadimage
//接口调用UEditor图片上传接口
//自定义接口需返回{"state":"","url":""}格式
var imgUpload = (function () {
    var action = "";
    var flag = "SUCCESS";
    var inp = undefined;
    var form = undefined;
    var elem = undefined;
    var frm = undefined;
    var config = function (setting) {
        action = setting.action;
        if (setting.flag != undefined)
            flag = setting.flag;
    };
    var htmlLoad = function () {
        var html = "";
        if (action == "") {
            throw "必须先设置action路径 调用imgUpload.config({\"action\":\".....\"});";
        }
        html += "   <form action='" + action + "' method='post' target='frmimgupload' enctype='multipart/form-data'>";
        html += "   <input type='file' id='fileBtn' name='upfile' autocomplete='off' style='display:none;'>";
        html += "   </form><iframe name='frmimgupload' style='display:none'></iframe>";
        $("body").append(html);
        inp = $("#fileBtn");
        form = $("form[target=frmimgupload]");
        frm = $("iframe[name=frmimgupload]");
    }//end htmlLoad
    var btnLoad = function () {
        $(".uploadimage").unbind("click");
        $(".uploadimage").css("cursor", "pointer");
        $(".uploadimage").css("overflow", "hidden");
        $(".uploadimage").on("click", function () {
            elem = $(this);
            inp.click();
        });
    };//end btnLoad
    var picRender = function () {
        inp.change(function () {
            var value = inp.val();
            if (value != null && value != "") {
                form.submit();
            }
        });
        frm.load(function () {
            console.log($("iframe[name=frmimgupload]").html());
            var doc = $(window.frames["frmimgupload"].document.body).find("pre") || $(window.frames["frmimgupload"].document.body);
            var data = doc.html();
            if (data != "" && data != null) {
                var j = {};
                try { j = JSON.parse(data); } catch (ex) { console.log(data); console.log(ex); }
                if (j.state == flag) {
                    elem.html("<img width=\"100%\" heigth=\"100%\" src=\"" + j.url + "\">");
                }
            } else {
                if (layer != undefined) {
                    layer.msg("图片上传失败", { time: 1000 });
                } else {
                    alert("图片上传失败");
                }
            }
        });
    }//end picRender
    return {
        "config": config,
        "Load": function () {
            if (frm == undefined) {
                htmlLoad(); btnLoad(); picRender();
            } else {
                btnLoad();
            }
        }
    }
})();

0X4 其他

可以直接使用百度Ueditor