如何向dropzone上传添加文本输入

Question

我想允许用户为拖入Dropzone的每个文件提交一个标题,该标题将被输入到文本输入中.但我不知道如何添加它.每个人都可以帮助我吗？

这是我的HTML代码

  <form id="my-awesome-dropzone" class="dropzone">
  <div class="dropzone-previews"></div> <!-- this is were the previews should be shown. -->

  <!-- Now setup your input fields -->
  <input type="email" name="username" id="username" />
  <input type="password" name="password" id="password" />

  <button type="submit">Submit data and files!</button>
</form>

这是我的脚本代码

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

  // The configuration we've talked about above
  url: "upload.php",
  autoProcessQueue: false,
  uploadMultiple: true,
  parallelUploads: 100,
  maxFiles: 100,
  maxFilesize:10,//MB

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

    // First change the button to actually tell Dropzone to process the queue.
    this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
      // Make sure that the form isn't actually being sent.
      e.preventDefault();
      e.stopPropagation();
      myDropzone.processQueue();
    });

    // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
    // of the sending event because uploadMultiple is set to true.
    this.on("sendingmultiple", function() {
      // Gets triggered when the form is actually being sent.
      // Hide the success button or the complete form.

    });
    this.on("successmultiple", function(files, response) {
      // Gets triggered when the files have successfully been sent.
      // Redirect user or notify of success.

    });
    this.on("errormultiple", function(files, response) {
      // Gets triggered when there was an error sending the files.
      // Maybe show form again, and notify user of error
    });
  },
  accept: function (file, done) {
        //maybe do something here for showing a dialog or adding the fields to the preview?
    },
 addRemoveLinks: true
}
</script>  

Answer 1

您实际上可以为Dropzone提供模板以呈现图像预览以及任何额外字段.在您的情况下,我建议您使用默认模板或制作自己的模板,只需在其中添加输入字段:

<div class="dz-preview dz-file-preview">
    <div class="dz-image"><img data-dz-thumbnail /></div>
    <div class="dz-details">
        <div class="dz-size"><span data-dz-size></span></div>
        <div class="dz-filename"><span data-dz-name></span></div>
    </div>
    <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
    <div class="dz-error-message"><span data-dz-errormessage></span></div>
    <input type="text" placeholder="Title">
</div>

可以在dropzone.js的源代码中找到完整的默认预览模板.

然后,您可以将自定义模板作为选项参数的previewTemplate键的字符串传递给Dropzone.例如:

var myDropzone = new Dropzone('#yourId', {
    previewTemplate: "..."
});

只要您的元素是表单,Dropzone将自动包含xhr请求参数中的所有输入.

Answer 2

我正在做一些非常相似的事情。我通过添加一个带有 jquery 的模式对话框来完成它，该对话框在添加文件时打开。希望能帮助到你。

 this.on("addedfile", function() { 
   $("#dialog-form").dialog("open"); 
 });

Answer 3

在我的回答中，将您的“标题”字段替换为我的“说明”字段。

将输入文本或文本区域添加到预览模板。例如：

<div class="table table-striped files" id="previews">

  <div id="template" class="file-row">
    <!-- This is used as the file preview template -->
    <div>
        <span class="preview"><img data-dz-thumbnail /></span>
    </div>
    <div>
        <p class="name" data-dz-name></p>
        <input class="text" type="text" name="description" id="description" placeholder="Searchable Description">
    </div>  ... etc.
  </div>
</div>

然后在发送函数中，追加关联数据：

myDropzone.on("sending", function(file, xhr, formData) {

  // Get and pass description field data
    var str = file.previewElement.querySelector("#description").value;
    formData.append("description", str);
    ...
});

最后，在执行实际上传的处理脚本中，从 POST 接收数据：

$description = (isset($_POST['description']) && ($_POST['description'] <> 'undefined')) ? $_POST['description'] : '';

您现在可以将您的描述（或标题或您拥有什么）存储在数据库等中。

希望这对你有用。弄清楚这是一个枪的儿子。