Bootstrap文件输入插件正在删除所有关于更改或文件选择的预览

Question

我正在开发一个网站。在我的网站上，我需要开发多个文件上传功能。我还需要显示所选照片的​​预览。所以我使用了这个引导插件 - http://plugins.krajee.com/file-input。但是现在我在更改文件选择时显示或维护预览图像时遇到问题。

例如，当我从数据库编辑实体时，我需要显示现有照片的预览。所以我像这样显示预览。

for (int i = 0; i<multipleHours.length;i++){
HashMap<String, String> alarm = new HashMap<>();
        alarm.put(ApplicationConstants.HOUR, String.valueOf(multipleHours[i]));
        alarm.put(ApplicationConstants.MINUTE, String.valueOf(multipleMinutes[i]));
        alarm.put(ApplicationConstants.REMINDER, String.valueOf(multipleReminders[i]));
        alarm.put(ApplicationConstants.DESTINATION, String.valueOf(multipleDestinations[i]));
alarmClocks.add(alarm);
}

如您所见，我将文件路径存储在数据库中，因此我使用图像的url显示预览。因此，当我进入编辑页面更新实体时，它会显示如下预览。

一切仍然正常。但问题是，当我浏览选择新文件或照片时，将删除所有现有预览图像，并且仅显示新选择的照片。我想要做的是我想显示现有的预览图像和新选择的照片。我该怎么做？我能想到的是覆盖这样的事件。

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 });

但关键是我不知道如何维护现有的预览图像。

Answer 1

这是一个老问题，但我们继续：

覆盖初始值：假