单个页面上的多个拖放区，第二种形式不显示上传文本

Question

我正在尝试将两个拖放区表单放在一个页面上，所有功能（如上传、显示、删除）都可以正常工作，但第二个表单不显示“将文件拖放到此处”文本。

我想为每个表单设置不同的文本，例如“将图像拖放到此处”和“将文档拖放到此处”。我怎样才能做到这一点？

我的代码如下所示：

html:

<div class="first">
  <div class="inner">
    <form class="dropzone" id="mydropzone" action="up.php"></form>
  </div>
</div>
<div class="second">
  <div class="inner">
    <form class="dropzone2" id="mydropzone2" action="up2.php"></form>
  </div>
</div>
<script>
Dropzone.autoDiscover = false;
Dropzone.options.mydropzone = {
   dictDefaultMessage: "my custom text one!"
};
$(".dropzone").dropzone({
  //dropzone stuff here like show already uploaded files, delete, etc...
});

Dropzone.options.mydropzone2 = {
   dictDefaultMessage: "my custom text two!"
};
$(".dropzone2").dropzone({
  //dropzone stuff here like show already uploaded files, delete, etc...
});

</script>

Answer 1

您使用 class dropzone2 作为第二个 dropzone，因此 dropzone.js 无法将其识别为 dropzone。此外，似乎在调用第一个 dropzone 后更改 dropzone 选项会阻止选项更改。

试试看，希望对您有所帮助

<div class="first">
    <div class="inner">
        <form class="dropzone" id="mydropzone" action="up.php"></form>
    </div>
</div>
<div class="second">
    <div class="inner">
        <form class="dropzone" id="mydropzone2" action="up2.php"></form>
    </div>
</div>
<script>
    Dropzone.autoDiscover = false;
    Dropzone.options.mydropzone = {
        dictDefaultMessage: "my custom text one!"
    };
    Dropzone.options.mydropzone2 = {
        dictDefaultMessage: "my custom text two!"
    };
    $("#mydropzone").dropzone({
        //dropzone stuff here like show already uploaded files, delete, etc...
    });
    $("#mydropzone2").dropzone({
        //dropzone stuff here like show already uploaded files, delete, etc...
    });
</script>

单个页面上的多个拖放区，第二种形式不显示上传文本

Multiple dropzone on single page, second form does not shows upload text

html

javascript

dropzone.js

dropzone