jQuery图片拖动组件Dropzone用法示例

下面就来详细讲解“jQuery图片拖动组件Dropzone用法示例”的完整攻略。

简介

Dropzone是一个开源的JavaScript库，用于处理文件上传和拖放。它支持文件的多类型上传，还可以自定义上传样式。而Dropzone以jQuery为基础，因此需要先引入jQuery。

安装

要使用Dropzone，首先需要下载并引入相关的文件：

<!-- jQuery库文件 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Dropzone库文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.css" integrity="sha512-2r8VsyBSglaP+X/DR6jz3swTfLG9zsr22zTRUKi22alvW9A0ZLnnQus5Koy2C/aNtWCAQio3KuPI7RF2k070Gg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js" integrity="sha512-ttAHwy3bGLYZekNgI+brl99A6Wyt9sa5Zv/Ko7if4vF6Ekmy/5szidRufjRAm6TvSF0griwlkk42eDn4j8N/6g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

注意：Dropzone需要在jQuery之后进行引入。

基本用法

创建一个空的form元素

<form action="/file-upload" class="dropzone" id="my-dropzone"></form>

在JavaScript中，通过初始化Dropzone构造函数来实现对Dropzone的使用：

Dropzone.options.myDropzone = {
  paramName: "file", // 参数名
  maxFilesize: 2, // 文件大小限制，单位为MB
  acceptedFiles: "image/*", // 可上传文件类型
  dictDefaultMessage: "拖动文件到此处上传", // 提示信息
  init: function() {
    this.on("complete", function(file) {
      // 文件上传完成后的回调函数
    });
  }
};

上传前预处理

在上传前对文件进行处理：

Dropzone.options.myDropzone = {
  paramName: "file", // 参数名
  maxFilesize: 2, // 文件大小限制，单位为MB
  acceptedFiles: "image/*", // 可上传文件类型
  dictDefaultMessage: "拖动文件到此处上传", // 提示信息
  init: function() {
    this.on("sending", function(file, xhr, formData) {
      // 在上传前对文件进行处理
    });
  }
};

例如，可以在这里添加csrf token，让上传更加安全。

完整示例

下面是一个完整示例，可以将图片上传到指定的URL地址，并在图片上传完成后在页面上显示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Dropzone 示例</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.css" />
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>
</head>
<body>
  <form action="/upload" class="dropzone" id="my-dropzone">
  </form>
  <div id="uploaded-files"></div>
  <script>
    Dropzone.options.myDropzone = {
      paramName: "file",
      maxFilesize: 2,
      acceptedFiles: "image/*",
      dictDefaultMessage: "拖动文件到此处上传",
      init: function() {
        this.on("success", function(file, responseText) {
          // 在图片上传完成后在页面上显示
          var img = new Image();
          img.src = responseText;
          var div = document.getElementById("uploaded-files");
          div.appendChild(img);
        });
      }
    };
  </script>
</body>
</html>

该示例将图片上传到/upload路径，上传完成后将图片的URL显示在页面上。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery图片拖动组件Dropzone用法示例 - Python技术站

jQuery图片拖动组件Dropzone用法示例

简介

安装

基本用法

上传前预处理

完整示例

相关文章