今天又需要,要求在选中某条记录后显示历史上传图片
上传控件是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 = ; i < data.length; i++) {
var suffix = data[i].FILE_Address.split('.')[data[i].FILE_Address.split('.').length - ];
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文件
【相关技术文档】
【官网】