关于bootstrap的fileinput图片显示问题

[qq_17039651]

如何使用fileinput进行显示上传过的图片？
图片已经上传，java方法/file/download/att进行下载，可以下载图片，但是如何用fileinput自带的方法显示图片？
目的是不想舍弃他的放大图片的功能

左侧是用以下代码显示的图片，右侧是fileinput封装的点击上传后的图片
$("#id-input-file-1").fileinput({
initialPreview: [ //预览图片的设置
'<img src="/file/download/att?type=image&imageType=item&uid=beddb3e88a594ce9b215b65f9051d9b9" alt="Your Avatar" class="file-preview-image" style="width:96px">'
]
});
缺少放大后的图片，以及图片大小

怎么处理呢

[github_35789764]

我刚刚遇到了这个问题。解决办法就是在 '<img src='/images/desert.jpg' class='file-preview-image' alt='Desert' title='Desert'>', 中加一个style 比如 '<img src='/images/desert.jpg' class='file-preview-image' style='width:100px;height:100px;max-width:100%;max-height:100%' alt='Desert' title='Desert'>',

[默默地牛]

上传完成后后台返回包含initialPreview和initialPreviewConfig的json数据，格式如： initialPreview: [ '<img src='/images/desert.jpg' class='file-preview-image' alt='Desert' title='Desert'>', ]， initialPreviewConfig: [ { caption: 'desert.jpg', width: '120px', url: 'http://localhost/avatar/delete', // server delete action key: 100, extra: {id: 100} } ] 参考：http://plugins.krajee.com/file-input#ajax-uploads

[qq_38832991]

$(function() { initMainImage(); //uploadChildImage(); }) function initMainImage() { $("#update_mainImage").fileinput({ initialPreview: [ '<%=request.getContextPath()%>${product.mainImagePath}' ], initialPreviewConfig: [ {key:1,showDelete: false} ], initialPreviewAsData: true, // 特别重要 //deleteUrl: "/site/file-delete", uploadUrl: "<%=request.getContextPath()%>/product", //上传的地址 enctype: 'multipart/form-data', showUpload : false, showRemove : false, language : 'zh', allowedPreviewTypes : [ 'image' ], allowedFileExtensions : [ 'jpg', 'png', 'gif' ], maxFileSize : 2000 }); // 添加上传成功的回调事件，异步上传返回结果处理 $("#update_mainImage").on("fileuploaded", function (event, t, previewId, index) { // 获取服务端给客户端的响应 var result = t.response; console.log(result); if (result.status == "success") { $("#mainImagePath").val(result.filePath); } }); }

[qq_42294932]

initialPreview ：'<img src='+array_element+' class="file-preview-image kv-preview-data file-preview-image_load" ' + 'style="max-width:100%;max-height:100%;">'; 亲测有效

[狂乱の贵公子]

返回多个图片着么显示

[AslenG]

引用 3 楼 qq_38832991 的回复:

$(function() { initMainImage(); //uploadChildImage(); }) function initMainImage() { $("#update_mainImage").fileinput({ initialPreview: [ '<%=request.getContextPath()%>${product.mainImagePath}' ], initialPreviewConfig: [ {key:1,showDelete: false} ], initialPreviewAsData: true, // 特别重要 //deleteUrl: "/site/file-delete", uploadUrl: "<%=request.getContextPath()%>/product", //上传的地址 enctype: 'multipart/form-data', showUpload : false, showRemove : false, language : 'zh', allowedPreviewTypes : [ 'image' ], allowedFileExtensions : [ 'jpg', 'png', 'gif' ], maxFileSize : 2000 }); // 添加上传成功的回调事件，异步上传返回结果处理 $("#update_mainImage").on("fileuploaded", function (event, t, previewId, index) { // 获取服务端给客户端的响应 var result = t.response; console.log(result); if (result.status == "success") { $("#mainImagePath").val(result.filePath); } }); }

谢谢层主，看了半天就这个有营养，自己组装img确实可以，但不太优雅，而且有图片大小不发自适应需要手动指定宽高度的问题。