Dropzone 是一个基于
HTML、CSS 和
JavaScript 的开源库，用于实现
拖拽上传文件的功能。Dropzone 具有强大的可扩展性和自定义性，可以很容易地集成到你的项目中。
使用 Dropzone 实现
拖拽上传文件并回显的代码如下：
HTML：
```
html
<!DOCTYPE
html>
<
html>
<head>
<meta charset="UTF-8">
<title>使用 Dropzone
拖拽上传文件</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dropzone/dist/dropzone.css">
</head>
<body>
<form action="upload.php" class="dropzone" id="my-dropzone"></form>
<ul id="file-list"></ul>
<script src="https://cdn.jsdelivr.net/npm/dropzone"></script>
<script src="upload.js"></script>
</body>
</
html>
```
JavaScript：
```
javascript
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#my-dropzone", {
url: "upload.php",
paramName: "file",
maxFilesize: 2, //
上传文件大小限制，单位为 MB
maxFiles: 10, // 最多
上传文件数量限制
addRemoveLinks: true, // 是否显示删除链接
dictRemoveFile: '删除
文件', // 删除
文件的链接文字
dictDefaultMessage: '将
文件拖到此处上传', // 默认的提示消息
dictFallbackMessage: '您的浏览器不支持
拖拽上传文件', // 浏览器不支持
拖拽上传时的提示消息
dictFileTooBig: '
文件大小超过限制', //
文件大小超过限制时的提示消息
dictInvalidFileType: '
文件类型不支持', //
文件类型不支持时的提示消息
init: function() {
this.on("success", function(file, response) {
console.log(response); // 回显上传成功的
文件信息
// 显示
文件列表
var li = document.createElement('li');
li.inner
HTML = file.name;
document.getElementById('file-list').appendChild(li);
});
}
});
```
在上面的代码中，我们首先将 Dropzone 的样式
文件和库
文件引入到
HTML 中，然后在
HTML 文件中添加一个表单，表单的 class 设置为 `dropzone`，id 设置为 `my-dropzone`，这样就可以让 Dropzone 自动将表单转换为
拖拽上传区域。在
JavaScript 中，我们首先设置了 `Dropzone.autoDiscover = false;`，这样就不会自动扫描
HTML 中的表单进行转换，而是通过 `new Dropzone()` 的方式来初始化 Dropzone。在初始化时，我们通过 `url` 参数指定了
上传文件的处理地址，通过 `paramName` 参数指定了
文件参数名，通过 `maxFilesize` 和 `maxFiles` 参数分别设置了
上传文件大小和数量的限制，通过 `addRemoveLinks` 和 `dictRemoveFile` 参数控制是否显示删除链接和删除链接的文字。在 `init` 回调函数中，我们通过 `success` 事件回调函数来获
取上传成功的
文件信息并回显到页面上。
需要注意的是，因为
上传文件使用了 `Dropzone` 对象，所以需要使用服务器端代码来进行处理，这里使用了 `upload.php` 来处理
上传文件。
2757
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
