使用服务器中的文件填充dropzone -异步
是指在使用dropzone插件时，通过异步方式从服务器获取文件并填充到dropzone中。
具体步骤如下：
- 在前端页面中引入dropzone插件的相关文件和样式。
- 创建一个HTML元素，作为dropzone的容器，例如：
<div id="myDropzone" class="dropzone"></div>- 在JavaScript中初始化dropzone，并配置相关参数，例如：
Dropzone.options.myDropzone = {
url: "/upload", // 服务器端接口地址
method: "post", // 请求方法
paramName: "file", // 上传文件的参数名
maxFilesize: 5, // 最大文件大小限制，单位为MB
addRemoveLinks: true, // 显示删除链接
dictRemoveFile: "删除文件", // 删除文件的提示文本
init: function() {
this.on("success", function(file, response) {
// 上传成功后的回调函数
console.log(response);
});
}
};- 在服务器端编写接口，用于接收上传的文件，并返回相应的结果。具体实现方式根据后端语言和框架而定。
- 在服务器端将需要填充到dropzone中的文件返回给前端。可以通过读取服务器上的文件，或者从数据库中获取文件路径等方式。
- 前端接收到服务器返回的文件信息后，调用dropzone的API将文件添加到dropzone中，例如：
var myDropzone = Dropzone.forElement("#myDropzone");
myDropzone.removeAllFiles(); // 清空已有文件
myDropzone.addFile(file); // 添加文件通过以上步骤，就可以实现使用服务器中的文件填充dropzone的功能。
关于dropzone的更多详细信息和使用方法，可以参考腾讯云对象存储COS的相关产品和文档：
请注意，以上答案中没有提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商，如有需要，可以自行搜索相关内容。
相关·内容
我正在尝试用从服务器获得的文件填充我的dropzone。我发现this post似乎可以做我想做的事情，但是我似乎只能在init函数中调用这个addCustomFile函数，而不是在我从服务器同步接收数据(与我正在查看的对象相关联的文件列表)之后。Dropzone.options.imageDrop = {
url: "upload.php&qu
浏览 15提问于2019-12-17得票数 0
回答已采纳
我在MVC中使用DropzoneJS。文件上传正常，但action不会显示另一个视图，重定向到另一个action后也不会显示另一个视图。只是停留在调用它的同一个视图上。display another view either: }<div id="dropzone">
<form action="/Da
浏览 1提问于2013-06-14得票数 0
回答已采纳
我使用dropzone.js上传多张图片： paramName: 'image',});
但问题是，当用户选择要上传的各种图像时，dropzone.js会同时发送所有请求，因此我的服务器(只有一个处理器)有时会使用5
浏览 2提问于2014-09-03得票数 0
回答已采纳
2回答
我正在使用dropzone.js创建一个drop zone表单。当表单提交为空时，表单会因为提交到空ULR而失败。如何重新验证表单以检查字段是否为空？</head>
<form id="uploader&qu
浏览 2提问于2014-01-10得票数 1
回答已采纳
$refs.vue2dropzone is undefined"我的typescript文件中 this.$refs.vue2dropzone.disab
浏览 18提问于2020-05-21得票数 0
回答已采纳
我有一个操作类，它运行在处理文件(图像)上传的整个应用程序中：{ return $request->file($imageProperty)->store($imageDir); }我使用服务类store()的原因是它已经通过了服务类中st
浏览 10提问于2022-10-10得票数 0
1回答
我正在使用我的php应用程序中的dropzone，但我无法将文件发布到服务器，我对dropzone相当新手已经阅读了文档，但仍然有这样的问题。这是html代码：这是javascript代码：
<script type="text/javascript" src="
浏览 0提问于2014-05-25得票数 1
通过使用下面的代码，它不允许任何图像上传，而不允许将其上传到maxFiles。它不是取变量maxFile的值，而是当我移除maxFile变量并放入一个数字时，它就可以正常工作了。从这个得到了源代码的想法。 } },
selector: 'form.dropzone'); initFileUploader: function(base, tar
浏览 5提问于2019-10-17得票数 3
回答已采纳
10回答
我使用Dropzone.js将文件上传到服务器。我将Dropzone maxFiles参数设置为10，并尝试如下： maxFiles: 10, $('.dropzone').unbind(
浏览 0提问于2014-06-12得票数 16
回答已采纳
我在渐进数据提交表单中使用了Dropzone.js。为了澄清这种情况，用户首先输入个人数据，然后单击next，dropzone表单将显示在用户上传文件的位置。为了等待用户完成对所有所需文件的附加，我禁用了autoProcessQueue，然后添加其他参数和授权令牌。此时，当用户单击next时，我调用processQueue()方法，这将导致立即导航到下一个表单，同时在后台上传附加的文件。问题是，在导航到下一页之前，我需要等待文
浏览 0提问于2018-06-03得票数 1
嗨，我有一个使用dropzone.js的表单，如下所示， <form method="post" action="{{url('/example/fileupload')}}" enctype="multipart/form-data" class="dropzone" id="dropzone">
浏览 11提问于2020-04-29得票数 0
1回答
我想使用Dropzone.js使每个化身成为一个不同的可下流场。但是，当我提交表单时，文件就找不到了。我可以理解为什么，因为文件字段不在表单中，所以它们被附加到主体中。-- etc -->
我正在初始化avatar div上的下拉区域。
是否可以将它们添加到表单的
浏览 2提问于2014-02-26得票数 5
回答已采纳
= document.getElementById("dropZone"); console.log(dropZone);};
问题是addEventListener没有向dropZone对象添加任何侦听器。因此，当我在控
浏览 1提问于2015-07-14得票数 0
回答已采纳
1回答
如果这是一个愚蠢的问题，请提前道歉，但我正在努力获得我想要的外观和感觉，同时将我需要的数据发布到服务器:s
我已经使用Dropzone.js构建了一个简单的文件上传页，并且能够将文件上传到服务器。我还想从dropzone中将一个值传递给相同的操作方法，但只有当我的dropzone包含在dropzone中时才能做
浏览 5提问于2016-03-29得票数 1
1回答
我正在尝试用Dropzone一次上传多个大文件。我想以异步的方式来实现。有没有可能用Dropzone做上面的事情？在PHP中有没有其他方法可以做到这一点？
浏览 0提问于2018-02-05得票数 0
我在想，在dropzone已经保存在服务器和数据库中之后，我如何才能清空其中的文件？我的问题是，当我提交它时，维护dropzone上的文件，甚至关闭模式上的文件。我希望我可以给出一个关于清空dropzone的代码，但我没有任何想法，所以我将留下dropzone和onsubmit的代码。onsbumit的代码
o
浏览 0提问于2017-07-17得票数 0
我在我的vuejs项目中使用dropzone。我已经在dropzone选项中设置了maxFiles: 1。现在，我必须在dropzone中显示来自服务器的现有文件，所以我使用此代码在dropzone中添加现有文件。dropzone中。但是，当我(手动)向dropzone添加更多文件</
浏览 1提问于2021-03-17得票数 0
我想使用这个javascript：var varFunc_Dropzone = function () {var dzone_upload_show_poster = function () {
dzone_u
浏览 15提问于2021-03-18得票数 0
我希望能够在不使用upload_preset的情况下使用DropZone上传到Cloudinary。要在不使用upload_preset的情况下上传，我需要在发送事件期间调用服务器应用程序接口。这是必需的，因为上传签名是使用Cloudinary支持的大多数图像上传参数以及时间戳生成的。因此，如果我想要根据实际删除的文件设置任何Cloudinary上载选项，我需要在
浏览 0提问于2016-12-25得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
