Question

我已成功将fine uploader实施到我的项目中。我使用addInitialFiles方法将其与之前上传的文件一起填充。

我想要做的是为每个呈现的文件预览添加一个下载按钮，既可以是用户添加的文件，也可以是“加载”文件。使用addInitialFiles预填充时。将按钮添加到标记模板非常简单，但我仍然坚持最惯用的方式：

在我已添加到标记的下载按钮上收听点击事件（例如，使用精细的上传器API方法或我自己的监听器？）
如何将必要的信息与每个按钮/缩略图关联以调用文件下载。

我将文件下载网址存储在一个mongo集合中，该集合即时返回并填充addInitial文件方法。

如果它出现：我不希望有一个好的上传者处理＆＃39;下载，我只是试图将下载功能编入其UI：）

欣赏任何/所有建议/指针！

Answer 1

在<li>。
收听qq.status.UPLOAD_SUCCESS状态更改。
成功时，更新锚链接以指向相应的下载端点。您可以使用getItemByFileId找到特定文件的锚链接。

在回复下载GET请求时，您需要确保服务器返回正确的Content-Disposition标头。

Answer 2

这可能有助于某人向每个上传的文件添加自定义下载按钮。

我已经测试过FineUploader 5.16.2版。

使用的引用链接-callback events和initial file list

文件上传器的代码为（用于下载按钮的两个事件）：

var defaultParams = {};
$('#fine-uploader-gallery').fineUploader({
    template: 'qq-template-gallery',
    thumbnails: {
        placeholders: {
            waitingPath: 'waiting-generic.png',
            notAvailablePath: 'not_available-generic.png'
        }
    },
    validation: {
        itemLimit: 10,
        // acceptFiles: 'image/*',
        // allowedExtensions: ['mp4','jpeg', 'jpg', 'gif', 'png']
    },
    session: { /** initial file list **/
      endpoint: '/uploaded_files', 
      params: defaultParams
    },
    request: { /** new upload file request **/
        endpoint: '/upload_files'
    },
    callbacks: {
        /** Event to initial files with download link 
        array(
            array('id' => xxx, 'name' => xxx, 'size' => xxx, 'thumbnailUrl' => xxx, 'uuid' => xxx, 'url' => fileUrl),
            array('id' => xxx, 'name' => xxx, 'size' => xxx, 'thumbnailUrl' => xxx, 'uuid' => xxx, 'url' => fileUrl2),
            ...
        }
        **/
        onSessionRequestComplete: function(id, name, responseJSON){
            id.forEach((item, index) => {
                var serverPathToFile = item.url,
                    $fileItem = this.getItemByFileId(index);
                if (responseJSON.status == 200) {
                    $($fileItem).find(".qq-download-option") /** Custom Anchor tag added to Template **/
                        .attr("href", serverPathToFile)
                        .removeClass("hide");
                }
            });
        },
        /** Event to newly uploaded file with download link
            responseJSON : array('success' => 'true', 'filename' => xxx, 'unique_id' => xxx, 'url' => fileurl)
        **/
        onComplete: function(id, name, responseJSON, xhr){
            var serverPathToFile = responseJSON.url,
                $fileItem = this.getItemByFileId(id);
            if (responseJSON.success) {
                $($fileItem).find(".qq-download-option") /** Custom Anchor tag added to Template **/
                    .attr("href", serverPathToFile)
                    .removeClass("hide");
            }
        }
    },
    deleteFile: {
        enabled: true,
        forceConfirm: true,
        method: 'DELETE',
        endpoint: '/delete_files',
        customHeaders: {},
        params:defaultParams
    }
});

精细上传，惯用的方式为每个上传的文件添加下载按钮

2 个答案: