fileinput 小计（显示历史上传图片）

今天又需要，要求在选中某条记录后显示历史上传图片

上传控件是fileinput.js

想法：界面有上传图片的控件，重新加载控件，并加入历史上传图片地址

实现代码：

 

var filepathArray = new Array();//存储
var imageList = new Array();
var infoList = new Array();

data = eval("(" + data + ")");
if (data == null || data == undefined) {
    return;
}

for (var i = 0; i < data.length; i++) {
    var suffix = data[i].FILE_Address.split('.')[data[i].FILE_Address.split('.').length - 1];
    fileList.push(
          (suffix == "jpg" || suffix == "gif" || suffix == "png")
          ? '<img src="' + data[i].FILE_Address + '" alt="' + data[i].FILE_NAME + '" class="file-preview-image" style="width:96px">'
          : '<p style="padding: 20px 5px;">' + data[i].FILE_NAME + '</p>'
      );
    infoList.push({
        caption: data[i].FILE_NAME,//文件名称
        width: "120px",
        url: "/Home/Index/DeleteFile?key=" + data[i].FILE_ID,//删除按钮触发的路径及传递的参数    后台删除文件的信息（数据库、文件）
        key: data[i].FILE_ID
    });
}

$('#fileinputID').fileinput('refresh', {
    initialPreview: imageList,//预览文件
    initialPreviewConfig: infoList//预览文件信息
}).on("fileuploaded", function (event, data, previewId, index) {//on事件需要重新绑定，否则不能使用   这个地方是控件初始化时绑定的其他方法
    var obj = eval('(' + data.jqXHR.responseText + ')');
    var fileInfo = new Object();
    fileInfo.FILENAME = obj.Message;//上传文件名称
    fileInfo.FILEPATH = obj.filePath.replace(/[\&]/, '_');//上传文件路径名称，替换一下特殊字符
    filepathArray.push(fileInfo);
});

 

遇到问题：控制台总是显示【fileinput is not a function】

错误原因：界面引用JS文件顺序有问题，导致加载页面后再次调用fileinput方法后报错

解决方式：先引用JQ文件，后引用fileinput.js文件

 

【相关技术文档】

【官网】