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

我试过了：

控制器（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,
    ....................................
                     });

krajee ajax-based-file-uploads-using-fileinput-plugin

1 个答案: