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

Posted

技术标签:

【中文标题】在 [FINE UPLOADER] 中显示以前上传的图像【英文标题】:show previously uploaded images in [FINE UPLOADER] 【发布时间】:2016-06-13 11:42:15 【问题描述】:

我正在使用精美的上传插件来上传图片。图片上传工作正常。我正在尝试做的是在图片上传后刷新页面时,上传器应该显示以前上传的图片。

这是我的代码..

$('#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);
            ,
        ,
    );

)

提前致谢。

【问题讨论】:

我已经阅读了这个docs.fineuploader.com/branch/master/features/session.html,但我不知道如何实现这个 这类事情有事件docs.fineuploader.com/api/events.html 【参考方案1】:

要在创建新的 Fine Uploader 实例时(例如在页面加载时)显示以前上传的图像或一般文件,您应该使用"initial file list" feature。

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

session: 
   endpoint: '/initial/files'

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

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

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

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

【讨论】:

'/initial/files' 那个文件的路径是什么? 会话:端点:'localhost/img/advertisements/advertisement_0_1467805607_138.png',不工作 它指向一个服务器端点,该端点返回一个 JSON 响应,描述系统上的一组现有文件。如果这对您不起作用,那么您的服务器设置不正确,或者您的服务器没有返回对 Fine Uploader 的初始文件 GET 请求的有效响应。 嗨,我只是将图像名称保存在数据库中,使用 uuid 等初始文件时需要的任何其他内容 请阅读文档,或至少查看您评论的答案,然后再提问。

以上是关于在 [FINE UPLOADER] 中显示以前上传的图像的主要内容,如果未能解决你的问题,请参考以下文章

Fine Uploader 无法上传文件

在 iOS 上的 Fine-uploader 中关闭相机

Fine Uploader 无法从亚马逊 S3 绘制缩略图

提交和取消时文件名中的精细上传器唯一但升序的 ID

Fine Uploader-没有收到来自已加载iframe的有效消息

Fine Uploader 到 S3 存储桶收到 405 Method Not Allowed 错误