Dropzone 附加数据传递到数据库答案

【问题标题】：Dropzone additional data to pass into databaseDropzone 附加数据传递到数据库
【发布时间】：2016-11-03 06:58:11
【问题描述】：

这是我第一次使用 dropzone.js，效果非常好。现在，我被用户填充了一个额外的文本区域而被阻止，但是发生的事情是文本区域值没有插入到数据库中，只插入了上传的图像。实际上，如果我将它放在带有类 dropzone 的表单中，那么额外的注释就可以正常工作，但由于 UI 问题，我希望它不在表单中。下面是一个小代码：

HTML：

<form id="droper" action="" method="post" class="dropzone" enctype="multipart/form-data" name="rotator_form">
                    {{ csrf_field() }}
                    <input type="hidden" name="rotatorId" value="{{ $currentId }}">
                    <div class="fallback">
                        <input id="file" multiple name="file" type="file"/>
                    </div>
                </form>
                <textarea name="note" class="form-control" placeholder="Add notes here.."></textarea>

<button id="submit-droper" class="btn green" data-dismiss="modal">Submit Droper</button>

脚本：

Dropzone.autoDiscover = false;

  var rotatorDroper = new Dropzone('#droper', {
      url: "/rotator/image-upload",
      autoProcessQueue: false,
      beforeSend: function(file, xhr, formData){
      formData.append('notes', 'hehehe');
    }
  });

   $('#submit-droper').click(function(e){
       rotatorDroper.processQueue();
   });

【问题讨论】：

标签： javascript dropzone.js

【解决方案1】：

如果您想在上传文件时发送其他数据，您可以在 init dropzone 参数中使用 sending 事件，如下所示：

Dropzone.options.your_form_id = {

    init: function (e) {

        var myDropzone = this;

        // Event to send your custom data to your server
        myDropzone.on("sending", function(file, xhr, data) {

            // First param is the variable name used server side
            // Second param is the value, you can add what you what
            // Here I added an input value
            data.append("your_variable", $('#your_input').val());
        });

    }
};

如您所见，data.append 将帮助您通过 Ajax 轻松地将键/值发送到您的服务器。

别忘了给你的 textarea 添加一个 ID 以便轻松获取它。

【讨论】：