如何使用jQuery Dropzone插件上传文件

下面是详细讲解“如何使用jQuery Dropzone插件上传文件”的完整攻略。

简介

Dropzone.js是一个开源的JavaScript库，用于简化文件上传处理。它具有优雅的拖放上传体验，可以创建预览缩略图，并在上传期间提供进度更新。

步骤

1. 下载Dropzone.js插件并引入

从Dropzone.js官网下载最新的插件文件，并将其引入到你的HTML文件中：

<link rel="stylesheet" href="path/to/dropzone.css">
<script src="path/to/dropzone.js"></script>

1. 创建HTML元素

在你的HTML页面中添加一个用于上传文件的form元素，该元素使用Dropzone类来实例化：

<form action="/upload" class="dropzone"></form>

action属性指定了上传文件的目标URL，dropzone类将自动挂载在该元素上。

1. 初始化Dropzone

在你的JavaScript文件中初始化Dropzone：

Dropzone.autoDiscover = false;
$(function() {
  var myDropzone = new Dropzone(".dropzone", { /* options */ });
});

我们首先将autoDiscover属性设置为false，以避免自动检测所有的form元素。

然后，我们等待页面DOM加载完毕，并使用jQuery选择器获取我们刚刚添加的form.dropzone元素。

最后，我们使用new关键字和Dropzone类来实例化Dropzone，并将它赋值给myDropzone变量。options参数用于指定一些配置选项，例如接受的文件类型、上传最大文件大小等。

1. 添加事件处理

为了更好的用户体验和上传进度条，我们可以添加一些事件处理。

myDropzone.on("complete", function(file) {
  myDropzone.removeFile(file);
});

这个处理会在所有上传完成后调用。我们使用removeFile方法从Dropzone队列中删除已上传的文件，以便用户可以选择上传其他文件。

示例

这里给出两个Dropzone.js的示例。

示例一：接收上传文件的服务器

const http = require('http');
const formidable = require('formidable');
const fs = require('fs');

http.createServer(function (req, res) {
  if (req.url == '/upload' && req.method.toLowerCase() === 'post') {
    const form = new formidable.IncomingForm();
    form.parse(req, function (err, fields, files) {
      const oldpath = files.file.path;
      const newpath = 'uploads/' + files.file.name;
      fs.rename(oldpath, newpath, function (err) {
        if (err) throw err;
        res.end('File uploaded and moved!');
      });
    });
  } else {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write('<form action="/upload" method="post" enctype="multipart/form-data">');
    res.write('<input type="file" name="file"><br>');
    res.write('<input type="submit">');
    res.write('</form>');
    return res.end();
  }
}).listen(8080);

这个示例实现了一个上传文件的服务器，文件以二进制流形式上传。它会将上传的文件保存到uploads/目录下，并返回上传成功信息。

示例二：验证上传文件类型和大小

var myDropzone = new Dropzone(".dropzone", {
  url: "/upload",
  acceptedFiles: "image/*",
  maxFilesize: 2,
  accept: function(file, done) {
    if (file.name == "justinbieber.jpg") {
      done("Naha, you don't.");
    } else {
      done();
    }
  }
});

这个示例使用一个回调函数检查上传的文件类型和大小，并拒绝上传Bieber的照片。

这些只是Dropzone.js插件的一些基本用法，你可以根据自己的需求使用更多的选项和事件处理。