javascript - krajee 基于 ajax 的文件上传使用文件输入插件

Question

首先抱歉我的英语不好;

我正在搜索带有缩略图图像的好文件上传..

我找到了 Krajee bootstrap-fileinput http://plugins.krajee.com/file-input

我认为这非常完整。

我上传照片成功了

这是我的代码:

$("#images").fileinput({

    uploadUrl: strURL, // you must set a valid URL here else you will get an error
    uploadAsync: true,

    previewFileType: "image",
    allowedFileExtensions: ["jpg", "gif", "png"],
    allowedFileTypes: ["image"],

    showUpload:true,
    maxFileSize: 5000,
    minFileCount: 1,
    maxFileCount: 8,

    elErrorContainer: "#errorBlock",

    overwriteInitial: false,
    initialPreview: [
    "<img src='http://lorempixel.com/200/150/people/1'>",
    "<img src='http://lorempixel.com/200/150/people/2'>",
                    ],
    initialPreviewShowDelete: true,
    initialPreviewConfig: [
    {caption: "People-1.jpg", width: "42px", url: "/site/file-delete", key: 1},
    {caption: "People-2.jpg", width: "42px",  url: "/site/file-delete", key: 2}, 
                          ],
                     });

但是现在，上传照片后，我希望用户修改 (删除以前上传的照片，添加新照片等。)

所以，我必须使用 initialPreview 和 initialPreviewConfig 选项...

但我不知道如何将服务器端的照片放入这些选项中？？

我需要使用服务器代码来生成初始化文件输入的初始javascript

我试过:

Controller (MVC)

$preview = array("<img src='<?php echo DIR;?>images/2015/Mars/100_3641.jpg' class='file-preview-image' >",
                         "<img src='<?php echo DIR;?>images/2015/Mars/100_3785.jpg' class='file-preview-image' >");

查看:

$("#images").fileinput({

    uploadUrl: strURL, // you must set a valid URL here else you will get an error
    uploadAsync: true,
    ......................

    initialPreview: '<?php echo $preview; ?>'  ,   //   images from  server ????
    initialPreviewShowDelete: true,
    ....................................
                     });

但这是不正确的!!

我该怎么做？？

非常感谢

Answer 1

制作一个Json数组

$json_preview = json_encode($preview);

$("#images").fileinput({

    uploadUrl: strURL, // you must set a valid URL here else you will get an error
    uploadAsync: true,
    ......................

    initialPreview: <?php echo $json_preview; ?>  ,   //   images from  server ????
    initialPreviewShowDelete: true,
    ....................................
                     });