博客

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

  • Post category:jquery

下面是关于如何使用 jQuery Dropzone 插件上传文件的攻略。

1. 简介

jQuery Dropzone 是一个简单易用且美观的文件上传插件，可以允许用户将文件通过拖拽的方式上传至服务器，也可以点击上传按钮进行上传。它易于定制和扩展，并允许您根据您的需要使用不同的选项和配置。

2. 安装

下载 Dropzone 的javascript和css文件，然后将它们放入你的应用程序中：

<link rel="stylesheet" href="dropzone.min.css">

<script src="dropzone.min.js"></script>

3. 基本用法

在HTML 中添加一个form元素，然后在form元素内创建一个div元素，并添加一个class属性为“dropzone”：

<form action="/your-upload-url" method="post" enctype="multipart/form-data" class="dropzone">
  <div class="fallback">
    <input name="file" type="file" multiple />
  </div>
</form>

下一步是使用 Dropzone 初始化表单：

Dropzone.options.myForm = {
  paramName: "file", // 这个是文件的名字，与后台的 name 属性保持一致
  maxFilesize: 2, // MB
  acceptedFiles: ".pdf,.doc,.docx,.jpg,.jpeg,.png", // 防止上传的其他文件格式
  addRemoveLinks: true, // 是否在图片上显示删除链接
  dictCancelUpload: "取消上传",
  dictRemoveFile: "删除文件",
  dictDefaultMessage: "拖动文件到此处上传",
  dictFallbackMessage: "您的浏览器不支持拖放文件上传方式",
  dictMaxFilesExceeded: "您一次最多只能上传 {{maxFiles}} 个文件",
  dictInvalidFileType: "文件类型不合法"
};

此时，Dropzone就已经被成功地初始化了，当我们将文件拖到这个表单后，Dropzone就会自动把它加入到上传队列，并进行上传。

4. 例子

这里列举两个例子，一个用于上传图片，一个用于上传视频：

4.1 上传图片

当你想创建一个上传图片的表单，可以使用下面的代码：

<form id="my-dropzone" class="dropzone">
  <div class="fallback">
    <input name="file" type="file" multiple />
  </div>
</form>

通过下面的 JavaScript 对象配置 Demos：

Dropzone.options.myDropzone = {
  dictDefaultMessage: "拖拽图片到这里或点击上传",
  acceptedFiles: "image/*",
  maxFilesize: 2, // MB
  addRemoveLinks: true,
  dictCancelUpload: "取消上传",
  dictRemoveFile: "删除",
  init: function() {
    this.on("success", function(file, response) { 
      // 上传成功处理
    });
  }
};

4.2 上传视频

当你想创建一个上传视频的表单时，可以使用以下代码：

<form id="my-dropzone" class="dropzone">
  <div class="fallback">
    <input name="file" type="file" multiple />
  </div>
</form>

通过下面的 JavaScript 对象配置 Demos：

Dropzone.options.myDropzone = {
  dictDefaultMessage: "拖拽视频到这里或点击上传",
  acceptedFiles: "video/*",
  maxFilesize: 50, // MB
  addRemoveLinks: true,
  dictCancelUpload: "取消上传",
  dictRemoveFile: "删除",
  init: function() {
    this.on("success", function(file, response) { 
      // 上传成功处理
    });
  }
};

5. 总结

希望以上攻略能帮助你更好地理解 Dropzone，同时也能够在你的项目中得到应用。如果在使用过程中遇到问题，可以参考官方文档进行排查，文档地址为：https://www.dropzonejs.com/。

祝愉快！

Tags: