将Dropzone.js与其他字段集成到现有的HTML表单中

javascript jquery html file-upload dropzone.js

2022-08-30 01:15:23

我目前有一个HTML表单，用户可以填写他们希望发布的广告的详细信息。我现在希望能够添加一个拖放区，用于上传待售商品的图像。

我发现Dropzone.js它似乎可以完成我需要的大部分工作。但是，在查看文档时，似乎您需要将整个表单的类指定为（而不仅仅是输入元素）。这意味着我的整个表单都变成了放置区。dropzone

是否可以在我的窗体的一部分中使用 dropzone，即仅将元素指定为类 “dropzone”，而不是整个窗体？

我可以使用单独的表单，但我希望用户能够使用一个按钮提交所有内容。

或者，是否有其他库可以执行此操作？

非常感谢

答案 1

这是另一种方法：在窗体中添加一个类名 dropzone，并以编程方式实现 dropzone。div

网页：

<div id="dZUpload" class="dropzone">
      <div class="dz-default dz-message"></div>
</div>

JQuery：

$(document).ready(function () {
    Dropzone.autoDiscover = false;
    $("#dZUpload").dropzone({
        url: "hn_SimpeFileUploader.ashx",
        addRemoveLinks: true,
        success: function (file, response) {
            var imgName = response;
            file.previewElement.classList.add("dz-success");
            console.log("Successfully uploaded :" + imgName);
        },
        error: function (file, response) {
            file.previewElement.classList.add("dz-error");
        }
    });
});

注意：禁用自动发现，否则Dropzone将尝试连接两次

答案 2

我遇到了完全相同的问题，发现Varan Sinayee的答案是唯一真正解决了原始问题的答案。这个答案可以简化，所以这里有一个更简单的版本。

步骤如下：

创建一个普通形式（不要忘记方法和 enctype args，因为这不再由 dropzone 处理）。
在里面放一个div（这就是Dropzone附加到它的方式）和（用于更改选项）。class="dropzone"id="yourDropzoneName"
设置Dropzone的选项，以设置将发布表单和文件的URL，停用autoProcessQueue（因此仅当用户按“提交”时才会发生）并允许多次上传（如果需要）。
将 init 函数设置为使用 Dropzone，而不是单击提交按钮时的默认行为。
仍然在 init 函数中，使用 “sendingmultiple” 事件处理程序在文件上发送表单数据。

瞧！现在，您可以像使用普通表单一样检索数据，以 $_POST 和 $_FILES 格式检索数据（在本例中，这将在上传.php）

断续器

<form action="upload.php" enctype="multipart/form-data" method="POST">
    <input type="text" id ="firstname" name ="firstname" />
    <input type="text" id ="lastname" name ="lastname" />
    <div class="dropzone" id="myDropzone"></div>
    <button type="submit" id="submit-all"> upload </button>
</form>

断续器

Dropzone.options.myDropzone= {
    url: 'upload.php',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 5,
    maxFiles: 5,
    maxFilesize: 1,
    acceptedFiles: 'image/*',
    addRemoveLinks: true,
    init: function() {
        dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

        // for Dropzone to process the queue (instead of default form behavior):
        document.getElementById("submit-all").addEventListener("click", function(e) {
            // Make sure that the form isn't actually being sent.
            e.preventDefault();
            e.stopPropagation();
            dzClosure.processQueue();
        });

        //send all the form data along with the files:
        this.on("sendingmultiple", function(data, xhr, formData) {
            formData.append("firstname", jQuery("#firstname").val());
            formData.append("lastname", jQuery("#lastname").val());
        });
    }
}