Dropzone.js 使用教程

1. 项目介绍

Dropzone 是一个简单易用的 JavaScript 库，它可以将任何 HTML 元素转变为一个拖放区域。用户可以将文件拖放到这个区域，Dropzone 会显示文件预览和上传进度，并通过 XHR（XMLHttpRequest）处理文件上传。这个库完全可配置，可以根据你的需求进行样式定制，已经被数千个开发者所信赖。

2. 项目快速启动

首先，你需要通过 npm 或者 yarn 安装 Dropzone：

npm install --save dropzone
# 或者
yarn add dropzone

作为 ES6 模块的使用方式（推荐）：

import { Dropzone } from 'dropzone';
const dropzone = new Dropzone('div#myId', { url: '/file/post' });

或者作为 CommonJS 模块的使用方式：

const { Dropzone } = require('dropzone');
const dropzone = new Dropzone('div#myId', { url: '/file/post' });

如果你不使用包管理器或打包工具，可以直接使用独立文件：

<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
<div class="my-dropzone"></div>
<script>
  // Dropzone 已经被添加为全局变量。
  const dropzone = new Dropzone('div.my-dropzone', { url: '/file/post' });
</script>

3. 应用案例和最佳实践

文件上传预览

注册一个回调函数 thumbnail(file, data) 来显示文件上传的缩略图。

dropzone.on('addedfile', function(file) {
  // 当文件被添加到 Dropzone 时触发
  Dropzone.thumbnail(file, function() {
    // 你的缩略图生成逻辑
  });
});

支持大文件上传

Dropzone 支持大文件上传，可以通过设置 maxFilesize 选项来限制文件大小。

const dropzone = new Dropzone('div#myId', {
  url: '/file/post',
  maxFilesize: 10, // 文件大小限制为 10MB
});

定制样式

你可以通过覆写默认的事件监听器来完全定制 Dropzone 的外观和感觉。

dropzone.on('dragenter', function(event) {
  // 当文件拖入 Dropzone 时触发
  // 定制样式逻辑
});

4. 典型生态项目

Dropzone 作为流行的文件上传库，其生态系统中有许多相关的项目，以下是一些典型的生态项目：

• dropzonejs-rails: 用于 Ruby on Rails 应用的 Dropzone.js 集成。
• react-dropzone: React 的 Dropzone 组件。
• vue-dropzone: Vue.js 的 Dropzone 组件。

这些项目可以帮助你在不同的开发框架和环境中更加容易地集成 Dropzone 功能。