Templates 如何将文本输入添加到dropzone上载

我想让用户提交一个标题，每个文件是拖入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>  

Dropzone.options.myAwesomeDropzone={//表单元素ID的简化版本
//我们上面讨论过的配置
url:“upload.php”，
自动处理队列：false，
uploadMultiple:true，
并行上传：100，
最大文件数：100，
最大文件大小：10，//MB
//dropzone的设置
init:function（）{
var myDropzone=this；
//首先更改按钮以实际通知Dropzone处理队列。
this.element.querySelector（“按钮[type=submit]”）。addEventListener（“单击”，函数（e）{
//确保表单没有实际发送。
e、 预防默认值（）；
e、 停止传播（）；
myDropzone.processQueue（）；
});
//收听sendingmultiple事件。在本例中，它是sendingmultiple事件
//因为uploadMultiple设置为true，所以发送事件的。
this.on（“sendingmultiple”，function（））{
//在实际发送表单时触发。
//隐藏成功按钮或完整表单。
});
此.on（“successmultiple”，函数（文件、响应）{
//在成功发送文件时触发。
//重定向用户或通知成功。
});
此.on（“errormultiple”函数（文件、响应）{
//在发送文件时出错时触发。
//可能会再次显示表单，并通知用户错误
});
},
接受：函数（文件，完成）{
//可能在这里做些什么来显示对话框或将字段添加到预览？
},
addRemoveLinks：正确
}

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

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

---

这一个在文档中是隐藏的，但是添加额外数据的位置在“发送”事件中。发送事件在发送每个文件之前调用，并获取xhr对象和formData对象作为第二个和第三个参数，因此您可以修改它们

因此，基本上您需要添加这两个额外的参数，然后在“sending”函数中或在您的情况下在“sendingmultiple”中添加额外的数据。您可以使用jQuery或纯js来获取值。所以它应该看起来像：

this.on("sendingmultiple", function(file, xhr, formData) {
      //Add additional data to the upload
      formData.append('username', $('#username').val());
      formData.append('password', $('#password').val());       
    });

---

对于那些希望保持自动并发送数据（如ID或不依赖于用户的内容）的用户，您可以在“addedfile”中添加一个setTimeout：

---

实际上，您可以为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就会自动在xhr请求参数中包含所有输入。

我找到了一个解决方案，因此我将把它写下来，希望它也能帮助其他人。基本的方法是在预览容器中有一个新的输入，如果文件数据是通过后续的上传过程传入的，或者是在初始化时从现有文件传入的，则通过css类进行设置

您必须将以下代码集成到您的代码中。。我只是跳过了一些让它工作可能需要的行

photowolke = {
    render_file:function(file)
    {
    caption = file.title == undefined ? "" : file.title;
    file.previewElement.getElementsByClassName("title")[0].value = caption;
    //change the name of the element even for sending with post later
    file.previewElement.getElementsByClassName("title")[0].id = file.id + '_title';
    file.previewElement.getElementsByClassName("title")[0].name = file.id + '_title';
    },
    init: function() {
        $(document).ready(function() {
            var previewNode = document.querySelector("#template");
            previewNode.id = "";
            var previewTemplate = previewNode.parentNode.innerHTML;
            previewNode.parentNode.removeChild(previewNode);
            photowolke.myDropzone = new Dropzone("div#files_upload", {
                init: function() {
                    thisDropzone = this;
                    this.on("success", function(file, responseText) {
                        //just copy the title from the response of the server
                        file.title=responseText.photo_title;
                        //and call with the "new" file the renderer function
                        photowolke.render_file(file);
                    });
                    this.on("addedfile", function(file) {
                       photowolke.render_file(file);
                    });
                },
                previewTemplate: previewTemplate,
            });
            //this is for loading from a local json to show existing files
            $.each(photowolke.arr_photos, function(key, value) {
                var mockFile = {
                    name: value.name,
                    size: value.size,
                    title: value.title,
                    id: value.id,
                    owner_id: value.owner_id
                };
                photowolke.myDropzone.emit("addedfile", mockFile);
                // And optionally show the thumbnail of the file:
                photowolke.myDropzone.emit("thumbnail", mockFile, value.path);
                // Make sure that there is no progress bar, etc...
                photowolke.myDropzone.emit("complete", mockFile);
            });
        });
    },
};

还有我的预览模板：

 <div class="dropzone-previews" id="files_upload" name="files_upload"> 
         <div id="template" class="file-row">
    <!-- This is used as the file preview template -->
    <div>
        <span class="preview"><img data-dz-thumbnail width="150" /></span>
    </div>
    <div>
    <input type="text" data-dz-title class="title" placeholder="title"/>

        <p class="name" data-dz-name></p><p class="size" data-dz-size></p>
        <strong class="error text-danger" data-dz-errormessage></strong>
    </div>
    <div>

        <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
          <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
        </div>
    </div>


  </div>

以下是我的解决方案：

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#myDropzone", { 
    url: 'yourUploader.php',
    init: function () {
        this.on(
            "addedfile", function(file) {
              caption = file.caption == undefined ? "" : file.caption;
              file._captionLabel = Dropzone.createElement("<p>File Info:</p>")
              file._captionBox = Dropzone.createElement("<input id='"+file.filename+"' type='text' name='caption' value="+caption+" >");
              file.previewElement.appendChild(file._captionLabel);
              file.previewElement.appendChild(file._captionBox);
        }),
        this.on(
            "sending", function(file, xhr, formData){
            formData.append('yourPostName',file._captionBox.value);
        })
  }
});

Dropzone.autoDiscover=false；
var myDropzone=新的Dropzone（“#myDropzone”，{
url:'yourUploader.php'，
init：函数（）{
这是我的(
“addedfile”，函数（文件）{
caption=file.caption==未定义？“：file.caption；
文件。_captionLabel=Dropzone.createElement（“文件信息：
”）
文件。_captionBox=Dropzone.createElement（“”）；
file.previewElement.appendChild（file.\u captionLabel）；
file.previewElement.appendChild（file.\u captionBox）；
}),
这是我的(
“发送”，函数（文件、xhr、formData）{
formData.append（'yourPostName'，file.\u captionBox.value）；
})
}
});

yourUploader.php：

<?php 
  // Your Dropzone file named 
  $myfileinfo = $_POST['yourPostName'];
  // And your files in $_FILES
?>

---

在我的回答中，用“标题”字段替换我的“描述”字段

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

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

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

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

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

$description=（isset（$\u POST['description']）和&（$\u POST['description']'undefined'））$_帖子['description']：''；

现在，您可以将您的描述（或标题或您拥有的内容）存储在数据库等中

希望这对你有用。这是一个很难理解的问题。

$（“#我最棒的dropzone”）。dropzone({
$("#my-awesome-dropzone").dropzone({
    url: "Enter your url",
    uploadMultiple: true,
    autoProcessQueue: false,

    init: function () {
        let totalFiles = 0,
            completeFiles = 0;
        this.on("addedfile", function (file) {
            totalFiles += 1;
            localStorage.setItem('totalItem',totalFiles);
            caption = file.caption == undefined ? "" : file.caption;
            file._captionLabel = Dropzone.createElement("<p>File Info:</p>")
            file._captionBox = Dropzone.createElement("<textarea rows='4' cols='15' id='"+file.filename+"' name='caption' value="+caption+" ></textarea>");
            file.previewElement.appendChild(file._captionLabel);
            file.previewElement.appendChild(file._captionBox);
            // this.autoProcessQueue = true;
        });
        document.getElementById("submit-all").addEventListener("click", function(e) {
            // Make sure that the form isn't actually being sent.
            const myDropzone = Dropzone.forElement(".dropzone");
            myDropzone.processQueue();
        });
        this.on("sending", function(file, xhr, formData){
            console.log('total files is '+localStorage.getItem('totalItem'));
                formData.append('description[]',file._captionBox.value);
        })

    }
});

url:“输入您的url”，
uploadMultiple:true，
自动处理队列：false，
init：函数（）{
让totalFiles=0，
completeFiles=0；
this.on（“addedfile”，函数（文件）{
totalFiles+=1；
setItem（'totalItem'，totalFiles）；
caption=file.caption==未定义？“：file.caption；
文件。_captionLabel=Dropzone.createElement（“文件信息：
”）
文件。_captionBox=Dropzone.createElement（“”）；
file.previewElement.appendChild（file.\u captionLabel）；
file.previewElement.appendChild（file.\u captionBox）；
//this.autoProcessQueue=true；
});
document.getElementById（“全部提交”）.addEventListener（“单击”），fu
$description = (isset($_POST['description']) && ($_POST['description'] <> 'undefined')) ? $_POST['description'] : '';

$("#my-awesome-dropzone").dropzone({
    url: "Enter your url",
    uploadMultiple: true,
    autoProcessQueue: false,

    init: function () {
        let totalFiles = 0,
            completeFiles = 0;
        this.on("addedfile", function (file) {
            totalFiles += 1;
            localStorage.setItem('totalItem',totalFiles);
            caption = file.caption == undefined ? "" : file.caption;
            file._captionLabel = Dropzone.createElement("<p>File Info:</p>")
            file._captionBox = Dropzone.createElement("<textarea rows='4' cols='15' id='"+file.filename+"' name='caption' value="+caption+" ></textarea>");
            file.previewElement.appendChild(file._captionLabel);
            file.previewElement.appendChild(file._captionBox);
            // this.autoProcessQueue = true;
        });
        document.getElementById("submit-all").addEventListener("click", function(e) {
            // Make sure that the form isn't actually being sent.
            const myDropzone = Dropzone.forElement(".dropzone");
            myDropzone.processQueue();
        });
        this.on("sending", function(file, xhr, formData){
            console.log('total files is '+localStorage.getItem('totalItem'));
                formData.append('description[]',file._captionBox.value);
        })

    }
});