ace_file_input回显地址图片_ace-file-input 如何结合 <span class="ace-file-containe-优快云博客

本文介绍了在使用BootStrap ace_file_input插件进行图片上传时遇到的地址图片无法回显的问题及解决方案。通过改写原生JS的show_file_list方法和新增i_bak方法，实现了地址图片的回显功能，改善了前端图片上传的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近写前端页面，需要做一个图片上传功能，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))