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