好的上传器，习惯的方式添加下载按钮，每个文件上传

Fine uploader, idiomatic way to add download button to each file uploaded

本文关键字：按钮 文件 下载 习惯 方式 添加      更新时间：2023-09-26

我已经成功地在我的项目中实现了fine uploader。我使用addInitialFiles方法来填充以前上传的文件。

我想做的是添加一个下载按钮到每个文件预览渲染，无论是作为一个用户添加的文件和'加载'时使用addInitialFiles预填充。将按钮添加到标记模板中非常简单，但是我不知道最习惯的方法是:

  • 监听我添加到标记中的下载按钮上的点击事件(例如使用一个好的上传器API方法，或者我自己的监听器?)
  • 如何将必要的信息与每个按钮/缩略图关联起来以调用文件下载

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

在它出现的情况下:我不希望有一个好的上传器'处理'下载，我只是试图编织下载功能到它的UI:)

感谢任何/所有的建议/指点!

  1. 在<li>的某个地方添加锚链接到模板。
  2. 监听qq.status.UPLOAD_SUCCESS状态变化。
  3. 成功后，更新锚链接以指向适当的下载端点。您可以使用getItemByFileId找到特定文件的锚链接。

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

希望这对在每个上传的文件中添加自定义下载按钮的人有所帮助。

我已经测试了FineUploader版本5.16.2。

Used ref links - callback events &初始文件列表

文件上传器的代码如下(用于下载按钮的两个事件):

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
    }
});
相关文章：