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

Question

我目前有一个HTML表单，用户可以填写他们希望发布的广告的详细信息。我现在希望能够添加一个dropzone来上传待售商品的图片。我发现dropzone.js似乎完成了我需要的大部分工作。但是，在查看文档时，您似乎需要将整个表单的类指定为“dropzone”（而不仅仅是输入元素）。这意味着我的整个表格成为了dropzone。是否可以在我的表单的一部分中使用dropzone，即仅将元素指定为类dropzone，而不是整个表单？

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

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

非常感谢

Answer 1

这是另一种方法：在表单中添加一个带有classname dropzone的div，并以编程方式实现dropzone。

HTML：

<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将尝试附加两次

博客文章： Dropzone js + Asp.net: Easy way to upload Bulk images

Answer 2

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

步骤如下：

1. 创建一个普通表单（不要忘记方法和enctype args，因为它不再由dropzone处理）。

2. 将div放入class="dropzone"（这是Dropzone附加到它的方式）和id="yourDropzoneName"（用于更改选项）。

3. 设置Dropzone的选项，设置将发布表单和文件的URL，取消激活autoProcessQueue（因此只有在用户按下'submit'时才会发生）并允许多次上传（如果需要）。

4. 在单击提交按钮时，将init函数设置为使用Dropzone而不是默认行为。

5. 仍然在init函数中，使用“sendingmultiple”事件处理程序将文件数据发送到文件中。

Voilà！您现在可以像使用普通表单一样检索数据，在$ _POST和$ _FILES中（在示例中，这将在upload.php中发生）

<强> HTML

<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>

<强> JS

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());
        });
    }
}

Answer 3

Enyo's tutorial非常好。

我发现教程中的示例脚本适用于嵌入dropzone的按钮（即表单元素）。如果您希望在表单元素外部使用该按钮，我可以使用单击事件来完成它：

首先，HTML：

<form id="my-awesome-dropzone" action="/upload" class="dropzone">  
    <div class="dropzone-previews"></div>
    <div class="fallback"> <!-- this is the fallback if JS isn't working -->
        <input name="file" type="file" multiple />
    </div>

</form>
<button type="submit" id="submit-all" class="btn btn-primary btn-xs">Upload the file</button>

然后，脚本标签....

Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element

    // The configuration we've talked about above
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 25,
    maxFiles: 25,

    // The setting up of the dropzone
    init: function() {
        var myDropzone = this;

        // Here's the change from enyo's tutorial...

        $("#submit-all").click(function (e) {
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();
        }); 
    }
}

Answer 4

您可以通过捕获dropzone中的“发送”事件来修改formData。

dropZone.on('sending', function(data, xhr, formData){
        formData.append('fieldname', 'value');
});

Answer 5

除了sqram所说的，Dropzone还有一个未记录的选项，＆＃34; hiddenInputContainer＆＃34;。您所要做的就是将此选项设置为要将隐藏文件字段附加到的表单的选择器。瞧！ ＆＃34; .dz-hidden-input＆＃34; Dropzone通常添加到身体的文件字段会神奇地移动到您的表单中。不要改变Dropzone源代码。

现在，虽然这可以将Dropzone文件字段移动到您的表单中，但该字段没有名称。所以你需要添加：

_this.hiddenFileInput.setAttribute("name", "field_name[]");

在此行之后

到dropzone.js：

_this.hiddenFileInput = document.createElement("input");

第547行。

Answer 6

为了在单个请求中提交所有文件以及其他表单数据，您可以将Dropzone.js临时隐藏load data infile节点复制到表单中。您可以在input事件处理程序中执行此操作：

addedfiles

显然，这是一种依赖于实现细节的解决方法。 Related source code

Answer 7

我有一个更自动化的解决方案。

HTML：

<form role="form" enctype="multipart/form-data" action="{{ $url }}" method="{{ $method }}">
    {{ csrf_field() }}

    <!-- You can add extra form fields here -->

    <input hidden id="file" name="file"/>

    <!-- You can add extra form fields here -->

    <div class="dropzone dropzone-file-area" id="fileUpload">
        <div class="dz-default dz-message">
            <h3 class="sbold">Drop files here to upload</h3>
            <span>You can also click to open file browser</span>
        </div>
    </div>

    <!-- You can add extra form fields here -->

    <button type="submit">Submit</button>
</form>

的JavaScript：

Dropzone.options.fileUpload = {
    url: 'blackHole.php',
    addRemoveLinks: true,
    accept: function(file) {
        let fileReader = new FileReader();

        fileReader.readAsDataURL(file);
        fileReader.onloadend = function() {

            let content = fileReader.result;
            $('#file').val(content);
            file.previewElement.classList.add("dz-success");
        }
        file.previewElement.classList.add("dz-complete");
    }
}

Laravel：

// Get file content
$file = base64_decode(request('file'));

无需禁用DropZone Discovery，而普通表单提交将能够通过标准表单序列化将文件与任何其他表单字段一起发送。

此机制在处理时将文件内容存储为隐藏输入字段中的base64字符串。您可以通过标准base64_decode()方法将其解码回PHP中的二进制字符串。

我不知道这种方法是否会受到大文件的攻击，但它可以处理大约40MB的文件。

Answer 8

我已经红色了 5.7.0 版本的所有 dropzone 源代码，并找到了优雅的解决方案。

解决方案

<form id="upload" enctype="multipart/form-data">
    <input type="text" name="name" value="somename">
    <input type="checkbox" name="terms_agreed">
    <div id="previewsContainer" class="dropzone">
      <div class="dz-default dz-message">
        <button class="dz-button" type="button">
          Drop files here to upload
        </button>
      </div>
    </div>
    <input id="dz-submit" type="submit" value="submit">
</form>

Dropzone.autoDiscover = false;
new Dropzone("#upload",{
      clickable: ".dropzone",
      url: "upload.php",
      previewsContainer: "#previewsContainer",
      uploadMultiple: true,
      autoProcessQueue: false,
      init() {
        var myDropzone = this;
        this.element.querySelector("[type=submit]").addEventListener("click", function(e){
          e.preventDefault();
          e.stopPropagation();
          myDropzone.processQueue();
        });
      }
    });

Answer 9

这只是您可以在现有表单中使用Dropzone.js的另一个示例。

dropzone.js：

 init: function() {

   this.on("success", function(file, responseText) {
     //alert("HELLO ?" + responseText); 
     mylittlefix(responseText);
   });

   return noop;
 },

然后，在文件的后面我放

function mylittlefix(responseText) {
  $('#botofform').append('<input type="hidden" name="files[]" value="'+ responseText +'">');
}

这假设您有一个ID为#botofform的div，上传时您可以使用上传的文件＆＃39;名。

注意：我的上传脚本返回了uploadedfilename.jpeg dubblenote你还需要制作一个清理脚本，检查上传目录中没有使用的文件并删除它们..如果是前端未经过身份验证的形式：）

Answer 10

这是我的示例，基于Django + Dropzone。视图已选择（必需）并提交。

<form action="/share/upload/" class="dropzone" id="uploadDropzone">
    {% csrf_token %}
        <select id="warehouse" required>
            <option value="">Select a warehouse</option>
                {% for warehouse in warehouses %}
                    <option value={{forloop.counter0}}>{{warehouse.warehousename}}</option>
                {% endfor %}
        </select>
    <button id="submit-upload btn" type="submit">upload</button>
</form>

<script src="{% static '/js/libs/dropzone/dropzone.js' %}"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
    var filename = "";

    Dropzone.options.uploadDropzone = {
        paramName: "file",  // The name that will be used to transfer the file,
        maxFilesize: 250,   // MB
        autoProcessQueue: false,
        accept: function(file, done) {
            console.log(file.name);
            filename = file.name;
            done();    // !Very important
        },
        init: function() {
            var myDropzone = this,
            submitButton = document.querySelector("[type=submit]");

            submitButton.addEventListener('click', function(e) {
                var isValid = document.querySelector('#warehouse').reportValidity();
                e.preventDefault();
                e.stopPropagation();
                if (isValid)
                    myDropzone.processQueue();
            });

            this.on('sendingmultiple', function(data, xhr, formData) {
                formData.append("warehouse", jQuery("#warehouse option:selected").val());
            });
        }
    };
</script>

Answer 11

我想在这里提供一个答案，因为我也遇到过同样的问题-我们希望$ _FILES元素与另一种形式在同一帖子中可用。我的答案基于@mrtnmgs，但是注意到添加到该问题的评论。

首先：Dropzone通过ajax发布其数据

仅仅因为您使用formData.append选项仍然意味着您必须解决UX操作-即，这一切都在幕后发生，而不是典型的表单发布。数据已发布到您的url参数。

第二：如果因此要模仿表单发布，则需要存储发布的数据

这需要服务器端代码将$_POST或$_FILES存储在另一个页面加载中可供用户使用的会话中，因为用户将不会转到接收已发布数据的页面

第三：您需要将用户重定向到执行此数据的页面

现在您已经发布了数据，并将其存储在会话中，您需要在其他页面中为用户显示/操作数据。您还需要将用户发送到该页面。

所以对于我的示例：

[Dropzone代码：使用Jquery]

$('#dropArea').dropzone({
    url:        base_url+'admin/saveProject',
    maxFiles:   1,
    uploadMultiple: false,
    autoProcessQueue:false,
    addRemoveLinks: true,
    init:       function(){
        dzClosure = this;

        $('#projectActionBtn').on('click',function(e) {
            dzClosure.processQueue(); /* My button isn't a submit */
        });

        // My project only has 1 file hence not sendingmultiple
        dzClosure.on('sending', function(data, xhr, formData) {
            $('#add_user input[type="text"],#add_user textarea').each(function(){
                formData.append($(this).attr('name'),$(this).val());
            })
        });

        dzClosure.on('complete',function(){
            window.location.href = base_url+'admin/saveProject';
        })
    },
});

Answer 12

试试这个

<div class="dropzone dz-clickable" id="myDrop">
  <div class="dz-default dz-message" data-dz-message="">
    <span>Drop files here to upload</span>
  </div>
</div>

JS

<script>
    Dropzone.autoDiscover = false;
    Dropzone.default.autoDiscover=false;
    $("div#myDrop").dropzone({
        url: "/file/post",
    });
</script>