html 如何使用dropzone拖拽上传文件并回显

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.innerHTML = 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` 来处理上传文件。

阅读全文

html 如何使用dropzone拖拽上传文件并回显

相关推荐

文件拖拽上传神器Dropzone.js使用教程

Dropzone.js上传文件示例与代码详解

使用原生JS与jQuery实现文件拖拽上传功能

dropzone 拖动上传

Django中使用Dropzone批量上传文件

dropzone拖拽上传控件包

asp.net使用dropzone上传csv文件,采用aspose.cell处理

express-ejs-dropzone:使用 express 和 ejs 在 Nodejs 中进行服务器端渲染以及使用 dropzone 上传多文件

dropzone.js 实现拖拽上传文件

flask-upload-dropzone:使用Dropzone.js上传烧瓶文件

Dropzone JS 使用指南（文件拖拽上传）

dropzone前段文件上传所需文件

dropzone上传文件结合SpringMVC

Dropzone.js实现文件拖拽上传实例

使用dropzone上传附件实例

js dropzone 拖拽上传选择多个文件并在预览图下面依次添加放大预览的按钮

dropzone java多文件,使用DropZone.js逐个上传多个文件

django Dropzone上传文件

Django中使用Dropzone 如何保存文件

Django中使用Dropzone 如何关联文件模型

最新推荐

Angular程序高效加载与展示海量Excel数据技巧

管理建模和仿真的文件

【SecureCRT高亮技巧】：20年经验技术大佬的个性化设置指南

如何设计一个基于FPGA的多功能数字钟，实现24小时计时、手动校时和定时闹钟功能？

Argos客户端开发流程及Vue配置指南

"互动学习：行动中的多样性与论文攻读经历"

【SecureCRT高亮规则深度解析】：让日志输出一目了然的秘诀

在用友U8 UFO报表系统中，如何通过格式管理功能实现报表的格式与样式自定义？

基于源码的PHP Webshell审查工具介绍

关系数据表示学习