dropzone.js 相关问题

多个 Dropzone.js 实例 - 文件上传到错误的实例

我最近将 dropzone.js 从旧版本（2012）更新到了最新版本。我在我的自定义 PHP CMS 中使用它来处理图像上传。我的 CMS 中有一个用于管理图像的部分。穆...

Dropzone 已附加到 Angular 2 或 Typescript 中

我在 Angular 2 组件内有一个以编程方式创建的 Dropzone，我想将其附加到主体上，这样我的整个网站就是用于上传的“dropzone”。 每次

Dropzone.js 不会在队列中发布文件，仅使用 JavaScript 发布格式不正确的文件

我有一个 Django 项目，它使用 Dropzone 将多个文件上传到用户创建的项目。所有这些都在同一个实例中（项目是与文件上传一起创建的），所以我使用

Dropzone.js 库多个文件上传到服务器问题

我设置了一个 Dropzone 实例，允许用户上传某个地点的多个图像。文件正在使用 AJAX 请求发送到服务器。我已经实现了事件处理程序，例如

添加按钮放置区

我有两个组件列表和表单。在这些组件上，我使用 Dropzone。 我禁用了点击，只能拖放。 但是，在表单组件上，我想添加一个按钮，它可以...

如何删除现有的文件放置区？

我有这个样本： 关联 代码 HTML： 上传或拖拽... 我有这个样品： 链接 HTML代码： <div class="dropzone dz-clickable" id="myDrop"> <div class="dz-default dz-message" data-dz-message=""> <span>Upload or drag patient photo here</span> </div> </div> JS代码： Dropzone.autoDiscover = false; var myDropzone = new Dropzone("div#myDrop", { addRemoveLinks: true, url: "#", maxFiles: 1, init: function() { this.on("maxfilesexceeded", function(file) { alert("You are not allowed to chose more than 1 file!"); this.removeFile(file); }); this.on("addedfile", function(file) { myDropzone.options.removefile.call(myDropzone, mockFile); // I want to delete an existing element }); } }); var fileName = $('#profilePicture').val(); var mockFile = { name: fileName, size: 12345 }; myDropzone.options.addedfile.call(myDropzone, mockFile); myDropzone.options.thumbnail.call(myDropzone, mockFile, "https://lh3.googleusercontent.com/-eubcS91wUNg/AAAAAAAAAAI/AAAAAAAAAL0/iE1Hduvbbqc/photo.jpg?sz=104"); 我想做的是当用户上传文件时，然后删除现有的文件。 如何正确地做到这一点？ 提前致谢！ 试试这个方法。 removedfile: function(file) { file.previewElement.remove(); } 这是一种工作方法： var currentFile = null; Dropzone.autoDiscover = false; var myDropzone = new Dropzone("div#myDrop", { addRemoveLinks: true, url: "#", maxFiles:1, init: function() { this.on("addedfile", function(file) { if (currentFile) { this.removeFile(currentFile); } currentFile = file; }); } }); “您的每个事件”，例如：成功 - 错误 - 发送 - 删除文件或添加文件等。 http://www.dropzonejs.com/#event-list init : function () { self.on('Every your events', function (file, response) { this.removeFile(file); } } 要从此功能中删除文件可以这样做： Dropzone.forElement("div#myDrop").removeAllFiles(true); 尝试这个方法： success: function (file, response) { if (this.files.length > 1) this.removeFile(this.files[0]); //Do others tasks... } 通过这种方法，前一项将被删除。 对我有用，如果图像已经上传到拖放区，它不允许我添加更多。 this.on("addedfile", function(file) { /* Valid only in the dropzone . If a repetitive document shows ALERT and the previous item will disappear.(Sorry my English). */ if (this.files.length) { var i, len, pre; for (i = 0, len = this.files.length; i < len - 1; i++) { if (this.files[i].name == file.name && this.files[i].size == file.size && this.files[i].lastModifiedDate.toString() == file.lastModifiedDate.toString()) { alert("Doc: " + file.name + " is already registered.") return (pre = file.previewElement) != null ? pre.parentNode.removeChild(file.previewElement) : void 0; } } } }); 嗨，您只需将 addRemoveLinks: true, 添加到 dropzone 功能即可 dropzon ajax后添加成功功能 success:function(file,response){ file.serverId = response.id; $(".dz-preview:last .dz-remove").attr('onclick','delete_file('+file.serverId+')'); } 在此代码中，成功上传文件后，添加到 onclick 中 dropzone 的最后一个标签以调用 delete_file 函数，在此函数上，您可以接收 id 并将 id 发送到后端，查找文件 在后台删除文件 您可以将 maxFiles 设置为 1 或任何其他数字，监听 maxfilesexceeded 事件，然后从文件数组中删除特定文件（第一个） $("#dropzone-upload").dropzone({ init: function() { this.on("maxfilesexceeded", function(file){ this.removeFile(this.files[0]) alert("Only one file can be uploaded at a time, original file removed!"); }); }, url: "exampleurl", maxFiles: 1, }); }); 要删除 Dropzone 中的现有文件，您可以在文件对象上使用 .removeFile() 方法。 以下是如何在代码中使用它的示例： Dropzone.options.dropzonewidget = { 上传多个：true， // 其他配置选项 初始化：函数（）{ var dropzone = this; $.ajax({ // your AJAX settings success: function(data) { var existingFiles = data.existingFiles; for (var i = 0; i < existingFiles.length; i++) { var file = { name: existingFiles[i].name, size: existingFiles[i].size }; dropzone.emit("addedfile", file); dropzone.emit("complete", file); dropzone.createThumbnail(file, "path/to/thumbnail/" + file.name, null, true); dropzone.files.push(file); } for (var i = 0; i < dropzone.files.length; i++) { var file = dropzone.files[i]; if (file.name != "bla.jpg") { dropzone.removeFile(file); } } } }); this.on("successmultiple", function() { $.ajax({ // your AJAX settings success: function(data) { var newFiles = data.newFiles; for (var i = 0; i < newFiles.length; i++) { dropzone.emit("addedfile", newFiles[i]); dropzone.emit("success", newFiles[i], null, newFiles[i].fileObj); dropzone.createThumbnail(newFiles[i], newFiles[i].fileObj.path, null, true); } dropzone.processQueue(); } }); }); this.on("removedfile", function(file) { $.ajax({ // your AJAX settings for deleting the file success: function() { // your success callback } }); });}}; 在上面的示例中，使用 .emit("addedfile") 方法将现有文件添加到 Dropzone 实例，然后使用 .removeFile() 方法从实例中删除。 使用 .emit("addedfile") 方法将 newFiles 添加到 Dropzone 实例，并使用 .createThumbnail() 方法创建缩略图。 默认情况下不在 dropzone.files 数组中的现有文件存在问题，并且 maxFiles 选项或 maxFilesexceeded 事件将无法按预期工作。 解决方案：将现有文件推送到文件数组。示例： $("#imagesarea").dropzone({ url: "https://<yourdomain>/upload", maxFiles: 1, maxFilesize: 10, acceptedFiles: ".jpeg,.jpg,.png", timeout: 50000, addRemoveLinks: true, success: function(file, response){ //do something on succcess }, error: function(file, response){ return false; }, maxfilesexceeded: function(file) { this.removeAllFiles(); this.addFile(file); }, init: function() { mockFile = { name: "320212", id: 320212, size: 452810, accepted: true, dataURL: "https://<yourdomain>/file.jpg" }; //show existing file this.displayExistingFile(mockFile, mockFile.dataURL); //here is important this.files.push(mockFile); this.on("removedfile", function (file) { //do something when file removed }); } });

警告：无效流：dropzone 上传后来自 springboot API 的 PDF 响应“FormatError: Bad FCHECK in flate flow: 120, 239”

我正在使用 dropzone 将文件发送到 springboot api，该 api 处理这些文件并返回 pdf 响应，我想将其显示在我的角度前端上。一切正常，直到时间结束...

Dropzone.js 用于调整图像大小的 TransformFile 函数

按照本教程，我在 Rails 应用程序中使用 Dropzone.js 实现了拖放图像上传：https://web-crunch.com/posts/rails-drag-drop-active-storage-stimulus-dropzone 现在我也...

如何将 Dropzone.js 集成到 Ruby on Rails 7.1.2 中

我正在尝试将 dropzone.js 集成到 Rail 版本 7.1.2 中，但 JavaScript 不起作用。在最新版本的 Rails 中导入节点模块似乎存在问题，所以我手动...

带有 Razor Pages 的 Dropzone 未将文件提交到 HttpContext.Request.Form.Files

我一直在努力在我的razor 页面上实现dropzone.js。我目前正在尝试创建一个帮助台，其中 dropzone 允许用户拖动文件以连同其票证一起上传。我还没有...

单击时删除 Dropzone 会多次触发 xhr 请求

我正在使用 Laravel 并使用 Dropzonejs 5x 添加图像上传器，并遇到了一个非常奇怪的问题，当上传多个图像时，如果我单击其中一个图像的“删除”，它就会触发...

如何在 DropzoneJS 中显示自定义错误消息？

我需要检查文件是否具有有效的 MIME 类型、文件大小是否正确以及尺寸是否正确，然后上传文件。 所以当一切正常时，我可以使用： 完成：函数（文件）{ // 做

配置 Dropzone.js

所以我是 dropzone.js 的新手，我有一个简单的 html 页面。当我拖放文件时，看起来我能够做到这一点。但是，现在我想使用一些选项（例如“可点击”）进一步配置它......

在 Dropzone.js 中如何设置我们可以上传的最小图像分辨率？接受不起作用

假设我需要限制我的用户上传低于 3MP（近 2048px 宽）的图像。我如何在 Dropzone.js 中执行此操作？尝试用“接受”来做到这一点，但它不起作用： $(函数() { 变种

dropzone 仅上传一个文件

我使用 dropzone.js 作为我的拖放文件上传解决方案。我只想上传一个文件，如果我上传第二个文件，则应删除第一个文件，并上传第二个文件。 知道如何...

Dropzone 接受的文件不起作用

我正在与 dropzone 合作上传文件。代码工作正常，但 AcceptedFiles 变量在脚本中不起作用。上传脚本接受所有格式，如 .zip、.mp3，这应该...

如何在使用react-dropzone时压缩react中的图像

我在我的下一个JS应用程序中使用react dropzone包。我想自动实现图像压缩。 在获得图像后，我首先将 blob/预览转换为文件阅读器。然后我...

通过点击外部模态框触发拖放区取消事件

我正在开发一个使用 dropzonejs 上传文件组件的项目。但是，我在尝试使其更加定制时遇到了这个问题。 如果您单击模态窗口之外的某个位置（引导程序莫...

Dropzone.js可以用来上传音乐和视频文件吗？

我在处理 .doc、pdf 等图像和文件时，使用 Dropzone 获得了成功的经验。现在我正在开发一个音乐和视频网站，并且想使用 Dropzone 进行上传，因为...

如何使用预览模板在一行中显示多个 Dropzone.js 预览记录

我正在使用 dropzone.js 来显示我的应用程序的图像。该应用程序使用 Laravel、Vue 和 Bootstrap。我的数据库中的一条记录可以有多达 40 多个图像，因此每行显示一个预览...