Question

这是我第一次使用dropzone.js，效果非常好。现在，我被一个额外的textarea用户填充阻止，但发生的事情是textarea值没有插入数据库只插入上传的图像。实际上额外的注释工作正常，如果我把它放在带有类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();
   });

Answer 1

如果您想在上传文件时发送其他数据，可以在init dropzone param中使用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以轻松获取。

Dropzone附加数据传入数据库

1 个答案: