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

Question

我正在开发一个网站。在我的网站中，我需要开发多文件上传功能。我还需要显示所选照片的​​预览。所以我使用了这个 Bootstrap 插件 - 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");
});

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

Answer 1

这是一个老问题，但我们开始:
覆盖初始:假