克拉吉

Question

首先，为我糟糕的英语感到抱歉；

我正在搜索一个有缩略图图像的好文件上传。

我发现Krajee引导-文件输入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,
    ....................................
                     });