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>