ace_file_input回显地址图片

最近写前端页面，需要做一个图片上传功能，BootStrap的ace_file_input真是相当好用的一个文件上传插件了。
出于体验感考虑，当然需要能够图片回显功能啦～
普通情况下，ace_file_input是能回显图片的，但是对于那种地址图片发现它突然不好使了。
搜罗了一大圈终于找到了解决方法，在此记录一下。
同时再次感叹前端好难啊。。。还是后端简单一点。
首先，要改写原生JS中的show_file_list方法，以及新增一个i_bak方法：

	f.prototype.show_file_list = function (k) {
        var n = typeof k === "undefined" ? this.$element.data("ace_input_files") : k;
        if (!n || n.length == 0) {
            return
        }
        if (this.well_style) {
            this.$label.find(".file-name").remove();
            if (!this.settings.btn_change) {
                this.$label.addClass("hide-placeholder")
            }
        }
        this.$label.attr("data-title", this.settings.btn_change).addClass("selected");
        for (var p = 0; p < n.length; p++) {
            var l = typeof n[p] === "string" ? n[p] : e.trim(n[p].name);
            var q = l.lastIndexOf("\\") + 1;
            if (q == 0) {
                q = l.lastIndexOf("/") + 1
            }
            l = l.substr(q);
            var m = "icon-file";
            if ((/\.(jpe?g|png|gif|svg|bmp|tiff?)$/i).test(l)) {
                m = "icon-picture"
            } else {
                if ((/\.(mpe?g|flv|mov|avi|swf|mp4|mkv|webm|wmv|3gp)$/i).test(l)) {
                    m = "icon-film"
                } else {
                    if ((/\.(mp3|ogg|wav|wma|amr|aac)$/i).test(l)) {
                        m = "icon-music"
                    }
                }
            }
            if (!this.well_style) {
                this.$label.find(".file-name").attr({
                    "data-title": l
                }).find('[class*="icon-"]').attr("class", m)
            } else {
                this.$label.append('<span class="file-name" data-title="' + l + '"><i class="' + m + '"></i></span>');
                var r = e.trim(n[p].type);
                var o = b && this.settings.thumbnail && ((r.length > 0 && r.match("image")) || (r.length == 0 && m == "icon-picture"));
                if (o) {
                    if (n[p].path) { // 这里多加了一个i_bak方法用于地址图片回显
                        e.when(i_bak.call(this, n[p])).fail(function (t) {
                            if (s.settings.preview_error) {
                                s.settings.preview_error.call(s, l, t.code)
                            }
                        })
                    } else {
                        var s = this;
                        e.when(i.call(this, n[p])).fail(function (t) {
                            if (s.settings.preview_error) {
                                s.settings.preview_error.call(s, l, t.code)
                            }
                        })
                    }
                }
            }
        }
        return true
    };
    var i_bak = function(o) {
        var n = this;
        var l = n.$label.find(".file-name:last");
        var m = new e.Deferred;
        var k = new FileReader();
        l.prepend("<img class='middle' style='display:none;' />");
        var p = l.find("img:last").get(0);
        e(p).one("load", function() {
            var t = 50;
            if(n.settings.thumbnail == "large") {
                t = 150
            } else {
                if(n.settings.thumbnail == "fit") {
                    t = l.width()
                }
            }
            l.addClass(t > 50 ? "large" : "");
            var s = {
                src: o.path
            };
            if(s == null) {
                e(this).remove();
                m.reject({
                    code: f.error.THUMBNAIL_FAILED
                });
                return
            }
            var r = s.w,
                u = s.h;
            if(n.settings.thumbnail == "small") {
                r = u = t
            }
            e(p).css({
                "background-image": "url(" + s.src + ")",
                width: r,
                height: u
            }).data("thumb", s.src).attr({
                src: s.src
            }).show();
            m.resolve()
        }).one("error", function() {
            l.find("img").remove();
            m.reject({
                code: f.error.IMAGE_LOAD_FAILED
            })
        });
        p.src = o.path;
        return m.promise()
    };

改写完成以后，就可以正常使用了：

<div class="controls col-sm-5">
	<input id="addImg" type="file" class="img-responsive" name="uploadImg" value="${(logo)!''}</#if>"/>
    <p class="help-block">仅支持jpg、png、bmp、jpeg、gif格式格式</p>
    <input type="hidden" id="logo" name="logo" value="${(logo)!''}"/>
</div>
<script type="text/javascript">
	$(function () {
        $('#addImg').ace_file_input({
            btn_choose: '请点击上传图片', // 没有文件的时候展示的内容
            btn_change: '请点击更换图片', // 有了文件的时候展示的内容
            thumbnail: 'fit', // 图片显示模式 false|small|large
            no_icon: 'icon-picture', // 没有文件的时候展示的图标
            style: 'well' // 只有是well样式下，才能回显图片
        }).on('change', function () {
            let fileName = $('#addImg').val();
            if (fileName === undefined || fileName === null || fileName === "") {
                return;
            }
            if (!(/\.(jpg|png|bmp|jpeg|gif)$/i).test(fileName)) {
                alert("请上传格式正确的图片！仅支持jpg、png、bmp、jpeg、gif格式格式！");
                $('#addImg').ace_file_input('reset_input');
            } else {
                let data = new FormData($("#editForm")[0]);
                $.ajax({
                    type: 'POST',
                    url: "图片上传方法路径",
                    data: data,
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        // 上传结果处理
                        // alert("上传图片失败！");
                        // $('#addImg').ace_file_input('reset_input');
                    }
                });
            }
        });
        if ($('#logo').val() && (/\.(jpg|png|bmp|jpeg|gif)$/i).test($('#logo').val())) {
            // 回显URL图片
	        $('#addImg').ace_file_input('show_file_list', [{
	            type: 'image',
	            // name: '', // 展示图片名称
	            path: $('#logo').val()
	        }]);
        }
    });
</script>