无法发送多个表单字段formdata dropzone.js答案

【问题标题】：Cannot sending multiple form fields formdata dropzone.js无法发送多个表单字段formdata dropzone.js
【发布时间】：2013-06-01 17:28:15
【问题描述】：

我在发送图像时遇到问题有一个文本区域字段供客户发送照片的描述，当他发送到数据库时，发送时好像所有图像都有相同的描述，只插入一个描述,

我正在使用库 DROPZONE.JS http://dropzonejs.com/

按照我的代码..请帮助我。

Dropzone.options.upload = {
    thumbnailWidth: 246,
    thumbnailHeight: 173,
    enqueueForUpload:false,
    paramName: "userfile",
    sending: function(file, xhr, formData) {    
        formData.append("titulo", $("#titulo").val());
        formData.append("evento", <?php echo $this->uri->segment(4); ?>);
        formData.append("capa", $("#cap").val());
    }
};

function upload() {
    var dz = Dropzone.forElement("#upload");
    for (var i = 0; i < dz.files.length; i++) {
        dz.filesQueue.push(dz.files[i]);
    }
    dz.processQueue(); 
}

【问题讨论】：

标签： javascript input form-data dropzone.js

【解决方案1】：

如上所述，整个文档中只能有一个具有 id 的 DOM 元素，否则您将遇到问题。这可以通过将文件名添加到文本框字段的 id 来即时解决。

在预览模板中为您的文本框添加代码

previewTemplate: "<div class=\"dz-preview dz-file-preview\"> ...
<input type=\"text\" class=\"titulo\" data-dz-titulo >
...
data-dz-errormessage></span></div>\n</div>"

当 previewTemplate 由 addedfile 函数渲染时，创建一个名为 titulo + file.name 的 id，为您的元素提供唯一的 id。这可以通过在 addedfile 函数中添加一行代码来完成。

addedfile: function(file) {
    file.previewElement = Dropzone.createElement(this.options.previewTemplate);
    ...
    file.previewElement.querySelector("[data-dz-titulo]").id = "titulo" + file.name;
    ...
    file.previewElement.querySelector("[data-dz-size]").innerHTML = this.filesize(file.size);
},

现在您还必须使用文件名在发送函数中获取匹配的标题。

sending: function(file, xhr, formData) {
    var filetitulo = document.getElementById('titulo' +file.name).value;
    formData.append("titulo", filetitulo);
    });

【讨论】：

【解决方案2】：

当您使用$("#titulo") 时，您指的是具有titulo id 的输入/文本区域。

例如<input type="text" id="titulo">。

整个文档中只能有一个具有 id 的 DOM 元素。

将您的元素更改为<input type="text" class="titulo">，然后使用$(".titulo")[0]、$(".titulo")[1] 之类的内容来选择字段。

【讨论】：