📌  相关文章
📜  dropzone 添加下载按钮 addedfile - Javascript (1)

📅  最后修改于: 2023-12-03 15:00:32.568000             🧑  作者: Mango

使用Dropzone添加下载按钮 addedfile - JavaScript

简介

Dropzone是一个为文件上传设计的JavaScript库。它允许您轻松地将拖放功能添加到您的Web应用程序中，同时还提供了各种有用的功能，如文件上传进度、自动调整大小、错误处理和多文件上传等。

在这个教程中，我们将介绍如何使用Dropzone库添加一个下载按钮到添加文件列表中，以便用户在上传文件后可以下载他们。

代码实现
步骤1：添加依赖项

首先，我们需要将Dropzone的CSS和JavaScript文件添加到我们的HTML文件中。我们可以从Dropzone的官方网站上下载这些文件，或从CDN上获取。

<!-- add css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dropzone@5.9.2/dist/dropzone.css"
integrity="sha384-A9W/Tr1aBkxfLm6PQ3P6uxWJ9dL4LrOYpXPof6nQV1lHaYrMl15/c2LwBjM7iGBe"
crossorigin="anonymous">

<!-- add javascript -->
<script src="https://cdn.jsdelivr.net/npm/dropzone@5.9.2/dist/min/dropzone.min.js"
integrity="sha384-MJtNnwpik1EFq1B+Ub6v4Z2KJHDJIsrq5uYmVNEJ9tUruX9cGakTY0G0p2qbJ/Br"
crossorigin="anonymous"></script>
步骤2：创建HTML

接下来，我们需要为Dropzone创建一个HTML元素。在这个教程中，我们将使用一个简单的div元素，作为添加文件列表的容器。

<div class="dropzone" id="myDropzone"></div>
步骤3：初始化Dropzone

在初始化Dropzone之前，我们需要将一些选项传递给它，以配置其行为。在这个教程中，我们将使用一个选项对象，该对象包含一个回调函数，用于处理添加文件的事件。

// initialize dropzone
Dropzone.autoDiscover = false;

var myDropzone = new Dropzone("#myDropzone", {
  url: "/file/upload",
  acceptedFiles: ".pdf",
  addRemoveLinks: true,
  init: function () {
    this.on("addedfile", function (file) {
      // create download link
      var downloadButton = document.createElement("a");
      downloadButton.innerHTML = "Download";
      downloadButton.href = URL.createObjectURL(file);
      downloadButton.setAttribute("download", file.name);
      file.previewElement.appendChild(downloadButton);
    });
  },
});

在这个代码片段中，我们首先将autoDiscover选项设置为false，以便手动初始化Dropzone。

然后，我们创建了一个名为myDropzone的Dropzone实例，并将选项对象传递给它。其中url选项指定上传文件的URL，acceptedFiles选项指定允许上传的文件类型，addRemoveLinks选项指示是否在文件预览中添加删除链接。

最重要的是init选项，其中包括添加文件事件的回调函数。在回调函数中，我们为每个新添加的文件创建一个下载按钮，并将其追加到Dropzone的预览元素中。在这个例子中，我们使用URL.createObjectURL()方法创建一个临时URL，用于文件下载。

完整代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Dropzone 添加下载按钮 addedfile - JavaScript</title>
    <!-- add css -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dropzone@5.9.2/dist/dropzone.css"
    integrity="sha384-A9W/Tr1aBkxfLm6PQ3P6uxWJ9dL4LrOYpXPof6nQV1lHaYrMl15/c2LwBjM7iGBe"
    crossorigin="anonymous">

    <!-- add javascript -->
    <script src="https://cdn.jsdelivr.net/npm/dropzone@5.9.2/dist/min/dropzone.min.js"
    integrity="sha384-MJtNnwpik1EFq1B+Ub6v4Z2KJHDJIsrq5uYmVNEJ9tUruX9cGakTY0G0p2qbJ/Br"
    crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="dropzone" id="myDropzone"></div>

    <script>
      // initialize dropzone
      Dropzone.autoDiscover = false;

      var myDropzone = new Dropzone("#myDropzone", {
        url: "/file/upload",
        acceptedFiles: ".pdf",
        addRemoveLinks: true,
        init: function () {
          this.on("addedfile", function (file) {
            // create download link
            var downloadButton = document.createElement("a");
            downloadButton.innerHTML = "Download";
            downloadButton.href = URL.createObjectURL(file);
            downloadButton.setAttribute("download", file.name);
            file.previewElement.appendChild(downloadButton);
          });
        },
      });
    </script>

  </body>
</html>
结论

在这个教程中，我们介绍了如何使用Dropzone库添加一个下载按钮到添加文件列表中。这个功能可以提高用户体验，并允许他们在上传文件后方便地下载他们。使用Dropzone库，您可以轻松地添加各种有用的功能到您的Web应用程序中，而无需编写复杂的JavaScript代码。