在[FINE UPLOADER]中显示以前上传的图像

Question

我正在使用精美的上传器插件上传图片.图片上传工作正常.我想要做的是在图片上传精简上传器应该显示以前上传的图像后刷新页面.

这是我的代码..

$('#accordion').on('shown.bs.collapse', function () {
    activeShopId1 = $(".collapse.in").attr("id");

    $('#' + activeShopId1 + '  #fine-uploader-gallery' + '.single-image').fineUploader({
        template: 'qq-template-gallery',
        request: {
            endpoint: 'upload_internal_image'
        },

        validation: {
            allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
            itemLimit: 1
        },
        messages: {
        tooManyItemsError: 'You can only add 1 image'
            },
        deleteFile: {
            enabled: true,
            forceConfirm: true,
            endpoint: 'delete_internal_image'
        },
        callbacks: {
            onSubmit: function (id, fileName) {
                this.setParams({shop_id: shopId4Map});
            },
        },
    });

})

提前致谢.

Answer 1

要在创建新的Fine Uploader实例(例如页面加载)时显示先前上载的图像或常规文件,您应该使用"初始文件列表"功能.

为此,您必须提供会话端点选项,如下所示:

session: {
   endpoint: '/initial/files'
}

Fine Uploader将向此端点发送GET请求,并且您的服务器必须使用包含表示要在列表中显示的每个文件的对象的JSON数组进行响应.

以下是Fine Uploader识别的每个对象的以下属性(*=必需):

• *name:String - 文件的名称.
• *uuid:String - 文件的UUID.
• size:Number - 文件的大小,以字节为单位.
• deleteFileEndpoint:String - 关联的删除文件请求的端点.如果省略,则使用deleteFile.endpoint.
• deleteFileParams:Object - 要与相关的删除文件请求一起发送的参数.如果省略,则使用deleteFile.params.
• thumbnailUrl:String - 要在文件旁边显示的图像的URL.
• *s3Key:String - S3存储桶中文件的密钥.仅在使用Fine Uploader S3时才需要.
• *s3Bucket:String - S3中存储文件的存储桶的名称.仅在使用Fine Uploader S3且无法通过检查端点URL(例如通过CDN路由时)确定存储桶时才需要.
• *blobName:String - Azure Blob存储容器中文件的名称.仅在使用Fine Uploader Azure时才需要.

响应将转换为JavaScript数组并传递给sessionRequestComplete事件处理程序.因此,随服务器响应传递的任何非标准对象属性也将传递给您的事件处理程序.