一个HTML表单中的多个dropzone实例
是指在一个网页的表单中，存在多个可拖拽上传文件的区域。dropzone是一种前端库，用于实现文件拖拽上传功能。通过使用多个dropzone实例，用户可以将不同类型的文件拖拽到不同的区域进行上传。
优势：
- 提供更好的用户体验：通过使用可拖拽上传文件的区域，用户可以直观地将文件拖拽到相应的区域，而不需要通过传统的文件选择方式进行上传。
- 提高效率：多个dropzone实例可以同时处理多个文件上传请求，提高了上传文件的效率。
- 灵活性：每个dropzone实例可以配置不同的参数和样式，以适应不同的上传需求。
应用场景：
- 多文件上传：当需要同时上传多个文件时，可以使用多个dropzone实例，将不同类型的文件上传到不同的区域。
- 分类上传：当需要将不同类型的文件上传到不同的目录或服务器上时，可以使用多个dropzone实例，每个实例对应一个目录或服务器。
- 多语言支持：当需要支持多种语言的文件上传时，可以使用多个dropzone实例，每个实例对应一种语言。
推荐的腾讯云相关产品：
腾讯云对象存储（COS）：腾讯云对象存储（COS）是一种高可用、高可靠、弹性扩展的云端存储服务，适用于存储和处理任意类型的文件。通过使用腾讯云对象存储，可以方便地将通过多个dropzone实例上传的文件保存到云端，并提供稳定的访问和管理。
相关·内容
信息：我想在Django项目中使用Dropzone js上传多个文件。我有两个模特。一个是邮报的，另一个是文件的。我的档案模型会有一个邮件模型的外键。关于我的Views.py，当用户填写表单帖子时，他也必须为帖子填写Files表单。
精细：当我提交Ajax_file_uploads表单而不是使用Dropzone.js时，多个选定的文件被附加到单个Post实例中。
Problem：如果我试图使用Dropzone.js上载多个文件，则在提交表单时会创建多篇文章和多个文件。
任何帮助都将不胜感激！
models.py
class Post(models.Model):
title = mod
浏览 8提问于2021-09-24得票数 0
我在网上浏览了几篇SO和博客文章，但找不到有用的东西。
我试图设置一个简单的HTML拖放表单，用户可以通过DropzoneJS一次性上传多个文件。
HTML：
<form action='<?php echo url_for("@menu_basic_menu"); ?>' method="post" enctype="multipart/form-data" class="dropzone" id="basic_menu_dropzone"></form>
&
浏览 3提问于2016-03-09得票数 4
回答已采纳
2回答
我正在尝试将Dropzone的上传功能整合到我的Laravel 4应用程序中。
我已经在我的主布局中包含了js/css文件，如下所示
{{ HTML::style('packages/bootstrap/css/dropzone.css') }}
{{ HTML::script('packages/bootstrap/js/dropzone.js') }}
然后，我在add.blade.php中包含了想要显示框的html表单
<form action="/file-upload" class="dropzone" id=&#
浏览 2提问于2014-04-04得票数 0
2回答
我有一个django模板与表单元素，其中包括一些输入文本编辑和提交按钮和一个用户头像上传与DropzoneJS。问题是，我不能在我的表单中把DropzonJs放在div中，因为它引发了一个csrf_token error。当我在dropzoneJS;的div中放入一个csrf_token时，没有任何变化。我发现csrf_token只适用于HTML表单元素。这是我的模板：
<form role="form" method="POST">
{% csrf_token %}
<h5>Edit Profile Details<
浏览 3提问于2015-06-01得票数 1
2回答
我正在制作复杂的表单，我想使用多个(不同的) dropzone.js来上传文件。
下面是我是如何制作的：
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
... form elements...
<div id="files" name="files" class="dropzone"></div>
}
和JS：
Dropzone.options.files = {
autoProcessQueue: false,
uploadMultipl
浏览 5提问于2015-04-07得票数 9
在表单中不使用类的情况下如何使用dropzone。
我基本上希望在表单中有一个div，并在该div中调用class="dropzone"。但它似乎不起作用。
下面是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/basic.css" />
<link rel="stylesh
浏览 0提问于2013-04-24得票数 2
回答已采纳
1回答
我有多个下拉区域表单
<form action="/upload" class="dropzone" id="group1"></form>
<form action="/upload" class="dropzone" id="group2"></form>
<form action="/upload" class="dropzone" id="group3"></form>
浏览 0提问于2017-08-18得票数 1
1回答
我在表单中使用dropzone。表单已包含字段。当用户提交表单时，指向表单的操作(在我的例子中是控制器)被调用两次:第一次有dropzone文件，第二次没有文件，为什么？如何防止再次转发相同的表单？
下面是我所做的：
HTML：
@using (Html.BeginForm("Create", "Home", FormMethod.Post, new { enctype = "multipart/form-data", @class = "dropzone", id = "myForm" }))
{
... som
浏览 1提问于2015-05-07得票数 2
1回答
因此，我使用下拉区域js创建拖放文件上载表单与django。Dropzone要求您使用一个django表单和一个类的dropzone，因为我也允许用户输入文本，我只是继续使用django创建了两个表单。一个用于下拉区域拖放文件上载器，另一个用于常规输入字段。我创建了一个submit按钮，当单击按钮时，它同时提交两个表单，并使用javascript完成了这一操作。我一直试图从提交的表单中检索信息，但是即使我提交了一些东西，仍然没有得到任何返回。知道为什么吗？
<button type="submit" id="add">Save</butto
浏览 1提问于2019-02-13得票数 0
回答已采纳
我想在动态加载的表单中使用dropzone.js。这是我的实际代码。
实现源并将自动发现设置为false
<script src="scripts/dropzone.min.js"></script>
<script>
Dropzone.autoDiscover = false;
</script>
我使用jquery加载表单
$.ajax({
method: "GET",
url: "form.php",
data: { user_id: userId }
}).don
浏览 0提问于2017-10-20得票数 0
1回答
我正在尝试将dropzone表单添加到django模板中，但它不会显示。我已经使用django的静态导入，并从下载dist文件夹，并使用
<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
按照网站的指示。
<html>
{% extends 'base.html' %}
{% block head %}
<head>
{% load staticfiles %}
浏览 0提问于2017-08-10得票数 1
我正在尝试让Dropzone在asp.net页面上工作。我可以毫无问题地拖放图像，但是，当我将鼠标悬停在图像上时，它会在悬停对话框中显示页面内容。
我已经尝试了几次(vb表单页面和html)，都有相同的结果。.css和.js文件已经就位。任何帮助都将不胜感激。代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/dropzone
浏览 1提问于2016-10-13得票数 0
我正在尝试更改blueimp上传文件的main.js，以便在同一页面上有多个文件上传小部件。我把表单的id改成了class。我也在main.js中进行了更改：
$('.fileupload').each(function () {
$(this).fileupload({
dropZone: $(this)
url: 'server/php/'
});
});
$('.fileupload').each(function () {
$(this).fileupload({
浏览 2提问于2014-03-01得票数 0
我目前有一个HTML表单，用户填写他们希望张贴的广告细节。我现在想能够添加一个dropzone用于上传待售物品的图像。
我找到了，它似乎能满足我的大部分需求。但是，在查看文档时，似乎需要将整个表单的类指定为dropzone (而不仅仅是输入元素)。这意味着我的整个表单变成了dropzone。
是否可以只在表单的一部分使用dropzone，即只将元素指定为类 "dropzone"，而不是整个表单？
我可以使用单独的表单，但我希望用户能够通过一个按钮提交所有表单。
或者，有没有其他库可以做到这一点？
非常感谢
浏览 217提问于2013-07-26得票数 200
1回答
在jquery中使用此代码时：
$('#slider').prepend('<form action="/file-upload" class="dropzone" id="dropzone">');
Firefox会自动插入表单关闭标记：(下面的代码是生成的HTML)
<form action="/file-upload" class="dropzone" id="dropzone">
</form>
我想通过jquery决定将表
浏览 4提问于2015-01-11得票数 0
回答已采纳
我正在尝试将两个dropzone表单放在一个页面上，并且所有的功能，如上传、显示、删除都可以正常工作，但是第二个表单没有显示"drop files here“文本。 我想有不同的文本为每个表单，如“拖放图像”和“拖放文件在这里”。我如何才能做到这一点？ 我的代码如下所示： html： <div class="first">
<div class="inner">
<form class="dropzone" id="mydropzone" action="up.php&#
浏览 36提问于2021-10-27得票数 0
回答已采纳
3回答
Dropzone.js已附加
、、、、
我已经在我的项目中实现了下拉区域，一切都很好。除非浏览器决定在页面请求清晰时抛出一个错误，我已经将视图缩小为相当长的视图，但是下面的HTML当前驻留在表单中(不确定这是否会导致问题)--这里只显示了对下拉区域的一个引用，dropzone.js再次包含在包配置中，只有一次出现。
错误:如果(this.element.dropzone)抛出新错误(“Dropzone已附加”)。
这是我的观点
<div class="form-group">
<div class="col-xs-12 dropzone" id="UploadImag
浏览 6提问于2014-12-05得票数 2
我正在尝试使用Dropzone.js上传我的Rails应用程序中的文件。看起来，如果我使用标准设置，整个表单就变成了一个图像上传字段。但是，我的表单也包含其他字段。我只想在Dropzone.js区域使用file_field。
我使用的步骤如下：
Gemfile
gem 'rails-assets-dropzonejs', source: 'https://rails-assets.org'
application.js
//= require dropzonejs
application.css
*= require dropzonejs
_form.html.
浏览 2提问于2017-02-16得票数 0
1回答
我是个新开发人员。
我有多个步骤表单，我希望允许用户上传最大2(例如DROPZONE_MAX_FILE_SIZE= 3，PLOADED_PATH=os.path.join(base，'doc表单“))。
然后，在表单的不同部分(步骤)，我希望允许用户上传更多配置不同的文件(例如，DROPZONE_MAX_FILE_SIZE= 20，PLOADED_PATH=os.path.join(base，'med'))
我尝试过的事情：
尝试在两个不同的分区中两次在相同的表单上插入下拉区域，并为每个包含不同的URL路由提供自定义选项，但是没有工作(只有当我删除其中一个时才有效)，我
浏览 2提问于2018-11-14得票数 0
下面是我使用dropzone.js插件在服务器上上传文件的代码：
var file_up_names = new Array;
var duplicate_files = new Array;
var token = $('input[name=_token]').val();
Dropzone.autoDiscover = false;
var dropzone = $("#addPhotosForm").dropzone({
addRemoveLinks: true,
dictRemoveFileConfirmation: "Do y
浏览 18提问于2018-02-12得票数 1
你好，我正在使用[dropzone.js] (拖放文件库)，我希望用户可以单击一些按钮，并将添加Dropzone表单。(我已经有了一个下拉区域表单，在用户单击add后，将显示第二个dropzone表单。)
但我的问题是，单击“添加”按钮后，可以成功添加下拉区域表单，但无法上载该文件。我应该怎么做才能让它像第一个Dropzone表单一样上传？(哦，如果我正常地写第二个下拉列表，它可以正常工作。但是，如果单击“添加第二个下拉区域-表单”，则不工作。)。
这是我的密码。
<!DOCTYPE html>
<html>
<head>
<link href=
浏览 0提问于2016-12-05得票数 2
回答已采纳
2回答
我正在使用Dropzone，但没有创建dropzone窗体。它以这种方式对我很有效。
但是在这种情况下，我不能在我的页面中创建Dropzone的另一个实例。
var myDropzone1 = new Dropzone(
document.body,
{
url : "upload1"...
.
.
. some parameters
};
var myDropzone2 = new Dropzone(
docume
浏览 0提问于2014-10-30得票数 14
回答已采纳
我有一个Dropzone控件和一个jsGrid控件。拖放到Dropzone的文件将显示在jsGrid中。我只想上传一个文件，在它之后，应该没有上传文件的选项。现在可以通过以下方法来解决这个问题。
每次在jsGrid上触发更改事件时，否。计算jsGrid中的行数。如果计数为0，则启用Dropzone，如果计数为1，则禁用Dropzone。我似乎找不到计数no的代码。jsGrid中的行数。请帮助我与代码。
另外，如果有其他方法可以解决这个问题，请告诉我。
这是我表单的截图：
提前谢谢。
浏览 18提问于2019-10-29得票数 0
回答已采纳
2回答
我创建了一个拖放功能。被拖动的元素将被拖放到一个数组中。拖动工具保存在一个组件中。并且有3个字段文本、数字和日期将被拖到此表单中。输入将被监听，然后插入到dropzone数组中。我需要获取数组的相关索引并显示。但是我做不到。以下是代码段。
.html
<div *ngFor='let tool of dropzone'>
<label>{{dropzone.tool}} </label>
<div>
component.ts
dropzone = [];
move(draggedTool, dr
浏览 1提问于2018-10-18得票数 1
回答已采纳
我正在使用dropzone js制作一个表单，用户可以在其中上传信息和旁边的图像。Dropzone js要求dropzone有一个具有dropzone类的表单，这样拖放图像上传才能正常工作，这就给我留下了两个表单。第一个是普通输入表单，第二个是dropzone js表单。我的问题是，如何使用一个提交按钮提交dropzone js表单和普通输入表单。请注意，我使用的是html表单，而不是django的易碎表单。 <form method="POST" enctype="multipart/form-data" id="inputform"
浏览 30提问于2019-02-12得票数 0
回答已采纳
1回答
使用Dropzone将多个文件提交到使用不同id的多个表单，但它只针对最后一个id进行提交
这是我们用来提交的onclick提交函数
我选择了所有id为2的行。使用不同的urls (forms/upload_files/'id')将其收集到id数组中。
这是Dropzone函数
if($('#dropzoneDragArea').length > 0){
submitDropzone = new Dropzone("#id-form", $.extend({},_dropzone_defaults(),{
a
浏览 5提问于2018-08-13得票数 0
回答已采纳
2回答
我使用将添加到Rails应用程序中。我使用CarrierWave的图像上传，这是很好的工作，没有Dropzone。
当我将一个图像放到我的下拉区域表单中时，我会得到一个错误。表单位于我的“画布”模型的编辑页面上。
表格html
<%= form_for(@canvas, :html => { :class => 'dropzone', :id => 'awesomeDropzone' }) do |f| %>
<%= f.file_field :image %>
<%= f.submit %>
<
浏览 5提问于2014-04-24得票数 0
回答已采纳
1回答
我想使用Dropzone.js，这样用户就可以选择他想上传的图片。但我不希望他们被上传的动态，而只是被添加到表单，然后提交正常的方式在表单数组。我怎么能这么做？
我见过像这样的问题，但我根本不需要上传它们，我希望Dropzone将文件添加到我的表单中。
顺便说一句，如果这件事很重要的话，落区是在div，而不是在整个状态上。
有可能吗？
浏览 2提问于2016-12-08得票数 3
回答已采纳
我的表单包括dropzone.js，并使用jQuery插件formvalidation.io进行验证。
独立地，文件上传和验证元素按照预期工作，但是我需要表单验证才能在Dropzone上传任何文件之前运行。
我正试图通过
使用autoProcessQueue: false配置Dropzone以防止文件自动上传
从表单验证processQueue()回调手动调用Dropzone onSuccess
所有的尝试都失败了。似乎，以我有限的javascript知识，我无法从另一个函数中访问Dropzone？
我确信答案是关于Dropzone问题的评论之一: jQuery实例:
浏览 5提问于2019-05-18得票数 1
回答已采纳
我只有一个droppable div (dropZone)和几个可拖拽的。draggables是HTML代码片段，当将其放入dropZone中时，会呈现其中的html代码。( HTML代码存储在带有ID的外部html文件中)发生的情况是，当我放入一个可拖动的对象时，它工作得很好。但如果我删除了另一个，它就会清除当前代码。对如何做到这一点有什么建议吗？
$("#dropZone").droppable({
tolerance: 'touch',
over: function() {
$('.dragMe').addC
浏览 0提问于2012-09-27得票数 0
回答已采纳
1回答
我使用的是dropzone，我遇到了一个问题，在ajax调用之后，下拉区域没有检测到表单。在ajax成功的过程中，我尝试在放置表单之后添加Dropzone.discover();。
Ajax调用：
$.ajax({
type: 'POST',
url: 'https://xxxxxxx/?controller=Sellers&action=showAllProducts',
data: postData,
success: function (data) {
$('#showProducts').html(data
浏览 4提问于2015-06-17得票数 2
回答已采纳
我正在使用Dropzone js ()上传文件，但我需要知道有多少文件目前在dropzone内，用户可能已经删除了一些，但我需要知道是否有至少一个文件，然后我提交整个表单，用户正在填写。
如果我使用myDropzone.length，它仍然会计算从dropzone中删除的文件，因此，如果用户添加了2个文件，然后删除其中一个，则.length将为=2，在这种情况下，我需要知道实际长度，在这种情况下，实际长度将为1
浏览 0提问于2016-10-28得票数 9
我的问题是，我希望将下拉区域与cakephp2.5集成；但是在表单提交之后，$this->request->data'pic'返回空数组。但在drop区域，当我添加图像时，它会显示成功图像。第二，文件不移动到目标路径"APP.'webroot'.DS.'uploadedpics'.DS“
请检查下面的代码。
我在默认布局中包括了下拉区域css和js文件。
echo $this->Html->css('dropzone/basic');
echo $this->Html->css('
浏览 9提问于2014-07-11得票数 2
我试图在laravel项目中使用dropzone，但是我无法在服务器端获取文件。
我的刀片html代码：
{!! Form::open(['id' => 'create-intervention-form', 'url' => '/create-intervention', 'method' => 'post', 'class' => '']) !!}
<div id="multimedia" class="
浏览 0提问于2018-01-13得票数 0
2回答
我已经研究了几个小时了，所以希望有人能帮上忙。当文件上传到dropzone框中时，我正在尝试获取行id或表单id。我有多个表格行和多个dropzone框。
下面是我的表格中的一个示例行：
<table class="docs" id="show">
<tr class="doc" id="*Need_This*">
<td>
<div class="file_upload drop">
浏览 2提问于2013-04-17得票数 4
我有一个从服务器接收数据并显示dropzone.js表单的函数，
function requestData() {
// showDropzone(); // displaying dropzone from here works,
$.post("/userids/",null, function(data, status) {
jsonarray = JSON.parse(data);
showDropzone(); // here, it calls the function but dropzone is not di
浏览 0提问于2014-01-31得票数 0
我有一个具有母版页的网页表单。Dropzone不工作。我什么都试过了，但还是解决不了。 HTML <div class="block push-up-10">
<form action="upload.php" class="dropzone dropzone-mini dz-clickable"><div class="dz-default dz-message"><span>Drop files here to upload</span></div>&l
浏览 15提问于2019-07-02得票数 1
我使用的是，基于。
我有一个工作的HTML表单上传文件。
<form class="dropzone" method="POST" action="/upload.php" enctype="multipart/form-data">
<input type="hidden" name="_handler" value="onUpload" />
<div class="fallback">
&l
浏览 5提问于2017-03-02得票数 1
2回答
我正在使用dropzone.js创建一个drop区域表单。我首先将表单设置为自动上传该文件--这很好，但我只在用户提交数据时才修改该表单，我添加了名为custom_dropzone.js的文件，表单看起来正常，但文件从未上传到文件夹中。
HTML代码(index.php)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<head>
<link href=
浏览 4提问于2014-01-08得票数 1
回答已采纳
我正在使用Dropzone，并尝试将其与normal form相结合，所以我阅读了本教程，是的，我可以成功地做到这一点。然而，我希望其他输入文本域和提交按钮是在表单标签之外(在dropzone之外)，所以我使用css position:absolute文本输入到表单上方和表单下面的提交按钮
但是我忘记了，如果我选择图片上传表单，dropzone的高度将会增加。所以它失败了。(见截图)
<form id="my-awesome-dropzone" class="dropzone" style="position:relative"&
浏览 11提问于2016-12-28得票数 2
回答已采纳
1回答
我有dropzone，我想把它限制为只有一个文件，我该如何实现呢？ 下面是我的代码： <form action="Options.html" class="dropzone dz-clickable" id="mydropzone">
<div class="dz-default dz-message"><span>Drop file here</span><br /></div>
</form> 我试着这样做： $('#mydr
浏览 30提问于2019-12-17得票数 0
回答已采纳
我使用的是带有dropzone js的asp.net核心2.2。 我正在尝试提交一个表单以及dropzone js中包含的文件。 我有一个输入文件字段(可以是隐藏的，也可以不是隐藏的)。我想将dropzone文件分配给此字段并提交它。但是表单字段始终为空。 代码如下： MVC控制器： [HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Add(ViewModels.Photo model)
{
var files = HttpContext.Request.Form.Files; // this is also emp
浏览 35提问于2020-04-05得票数 2
回答已采纳
1回答
我遵循这个指南将dropzone集成到一个表单中并提交我的表单
然而，这就是我最终得到的结果
我的类别输入位于dropzone区域内，而不是外部。我的纽扣也一样。怎样才能使我的dropzone只位于div中，而不是占据整个表单？
这是我的dropzone配置和表单
@section scripts{
<script>
$(document).ready(function () {
$(document).on("submit", "#form", function (e) {
浏览 0提问于2018-11-09得票数 0
2回答
我正在使用dropzone.js创建一个drop zone表单。当表单提交为空时，表单会因为提交到空ULR而失败。如何重新验证表单以检查字段是否为空？
这是我的代码。谢谢你的帮助。
HTML代码(index.php)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<head>
<link href="../CSS/dropzone.css" t
浏览 2提问于2014-01-10得票数 1
回答已采纳
1回答
我是新来的，我提出了我使用的问题，我使用的文件上传按钮，点击它给我的长度是未知的。请帮我解决我的问题。当我删除就绪函数时，它不能正常工作，这就是为什么我保留了文档就绪函数。下面是我在html和以及ajax调用函数下面的代码。
HTML
<form action="#" class="dropzone" id="dropzone">
<div class="fallback">
<input name=&
浏览 5提问于2016-06-16得票数 0
1回答
Dropzone拖放重叠到表单域
、、、、
我刚刚实现了本教程中分享的关于将dropzone与其他表单字段集成为一个完整表单的一部分的建议。
我现在遇到的问题是，拖拽图像的表单上传空间现在覆盖了整个表单：
这是我的表单代码：
<form action="<?php echo base_url("dropzone/upload");?>" class='dropzone'>
<!--<form role="form">-->
<div class
浏览 2提问于2014-01-07得票数 0
我的网页上有一个经典的HTML表单和三个dropzone实例。
我使用$.ajax从超文本标记语言表单中发布数据，在success方法中我检查结果，如果表单成功，我运行dropzone processQueue从三个实例上传文件。但我不知道什么时候processQueue结束，因为重定向到另一个页面。
我认为solve使用的是jquery.when()，但我不知道如何实现它:/
浏览 3提问于2016-07-08得票数 0
回答已采纳
1回答
亲爱的朋友们，我目前正在为用户创建一个管理面板，他们可以很容易地发布他们的文章。我还想在我的表单中添加一个小文件上传程序，但遗憾的是，我在POST方法中的DROPZONEJS.JS文件遇到了一些问题。主要的问题是我不能给项目的本地文件的网址，以便下载到那里的文件，网站将访问这些文件，以便与当前文章的id发布它们。如果有什么不能理解的地方，请告诉我。
@{
ViewBag.Title = "Uppy";
}
@{
Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
<div class=&
浏览 6提问于2020-10-02得票数 0
我正在使用Django表单，使用dropzone上传图片。但我不想将dropzone添加到整个表单中，而只是添加到其中的一个div中。以下是模板： {% extends 'base.html' %}
{% load static %}
{% load i18n %}
{% block content %}
<h6>UPLOAD MULTIPLE IMAGES NOW</h6>
<br>
<div class="formdiv" style="width:100%">
<form enctyp
浏览 35提问于2021-10-13得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
