优秀的编程知识分享平台

网站首页 > 技术文章 正文

在线文件拖拽上传插件—DropzoneJS

nanyue 2024-09-14 06:22:36 技术文章 6 ℃

介绍

DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库, 零依赖且高度可定制

官网和Github

官方文档：https://www.dropzonejs.com/

中文版本：http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/#installation

Github: https://github.com/enyo/dropzone/

下载和安装

https://raw.githubusercontent.com/enyo/dropzone/master/dist/dropzone.js

引入到我们的页面

<script src="./path/to/dropzone.js"></script>

这是官网Demo的效果, 如果你也想用到这样的效果, 可以直接到源码包的dist文件夹下样式拷贝过来。

Dropzone 不会处理你上传到服务器上面的文件. 你必须自己编写代码实现接收和保存上传的文件。

如何使用?

我们只需要创建一个class类名是dropzone的form表单元素：

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

Dropzone将查找所有的 class 属性中包含 dropzone 的表单元素, 就是这么简单, 这些上传文件将被正常处理就像这里是一段像下面这样的HTML代码:

<input type="file" name="file" />

程序化方式创建 dropzones

不是必须在form上, 你也可以通过js代码初始化一个dropzone实例

// Dropzone class:
var myDropzone = new Dropzone("div#myId", { url: "/file/post"});

或者假如你用到了jquery也可以这样写

// jQuery
$("div#myId").dropzone({ url: "/file/post" });

配置

有两种方式配置 dropzones.

一种就是和之前创建表单一样

另一种是通过js代码实现, 如下

Dropzone.options.myAwesomeDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
accept: function(file, done) {
if (file.name == "justinbieber.jpg") {
done("Naha, you don't.");
}
else { done(); }
}
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./dropzone/basic.css" />
<link rel="stylesheet" href="./dropzone/dropzone.css" />
<script src="./dropzone/dropzone.js"></script>
</head>
<body>
<form action="" class="dropzone" id="my-awesome-dropzone"></form>

</body>
<script type="text/javascript">
//拖拽上传文件
Dropzone.autoDiscover = true;
var myDropzone = new Dropzone(".dropzone", {
url: "fileList.php",
addRemoveLinks: true,
method: 'post',
filesizeBase: 1024,
sending: function(file, xhr, formData) {
formData.append("filesize", file.size);
},
success: function(file, response, e) {
var res = JSON.parse(response);
if (res.error) {
$(file.previewTemplate).children('.dz-error-mark').css('opacity', '1')
}
}
});
</script>
</html>

Tags：

猜你喜欢

最近发表
标签列表