我正在开发一个网站。在我的网站中，我需要开发多文件上传功能。我还需要显示所选照片的预览。所以我使用了这个引导插件 - http://plugins.krajee.com/file-input。但是现在，当文件选择发生更改时，我在显示或维护预览图像时遇到了问题。
例如，当我从数据库中编辑实体时，我需要显示现有照片的预览。所以我像这样显示预览。
var photo_urls_string = $('#photo-urls').val();
var photo_urls = new Array();
if (photo_urls_string != null && photo_urls_string != "")
{
photo_urls = photo_urls_string.split(",");
}
var file_preview_html = new Array();
if (photo_urls.length > 0)
{
for(var i=0;i<photo_urls.length; i++)
{
var img_html = "<img src="+photo_urls[i]+" title="+photo_urls[i]+" />";
file_preview_html.push(img_html);
}
}
$('#photos-field').fileinput({ initialPreview : file_preview_html });
如您所见，我将文件路径存储在数据库中，因此我使用图像的 url 显示预览。因此，当我转到编辑页面更新实体时，它会显示如下预览。
一切仍然正常。但问题是当我浏览选择新文件或照片时，所有现有的预览图像都被删除，只显示新选择的照片。我想要做的是我想同时显示现有的预览图像和新选择的照片。我该怎么做？我能想到的是覆盖这样的事件。
$('#input-id').on('change', function(event) {
console.log("change");
});
但关键是我不知道如何维护现有的预览图像。