Javascript 使用Dropzone和个人输入字段进行多次上传

创建了一个可以毫无问题地上载多个文件的表单。正在尝试在上传之前将公司输入字段中的内容添加到每个文件中。 我遵循了Dropzone中的一个示例，该示例不使用

。现在我很难将

字段和图像一起传递到上传url

下面是我的代码片段

HTML

<div>
    <span class="btn btn-danger btn-block fileinput-button"><span class="fa fa-ticket"></span> Add cards</span>
    <span class="fileupload-process">
        <div id="total-progress" class="progress progress-small 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>
    </span>
</div>

<div class="files" id="previews">
    <div id="template" class="file-row">
        <div class="file-cell">
            <span class="preview"><img data-dz-thumbnail /></span>
            <div class="progress progress-small 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 class="file-cell">
            <p class="name" data-dz-name></p>
            <button class="start"><span>Start</span></button>
            <button data-dz-remove class="cancel"><span>Cancel</span></button>
            <button data-dz-remove class="delete"><span>Clear</span></button>
            <div>
                <input type="text" class="form-control cardInput cardName" placeholder="Card name" name="cardName" />
            </div>
        </div>
    </div>
</div>

您可以通过注册

发送

事件并使用带有三个参数的回调函数来提交文件之外的任何数据：

文件

、

xhr

和

表单数据

。在这个回调函数中，您可以在

formData

中附加额外的自定义字段，作为POST数据随文件一起提交。请注意，此实现将要求您使用HTML

在您的情况下，由于您试图在单击按钮时为每个图像发送一个单独的

input

字段，因此每次触发

addfile

事件时，您都可以通过向页面上的文件容器

div

添加一个新的

input

字段来实现这一点，为每个

输入

字段分配一个

myinput

的

id

，其中

是与新添加的

输入

字段关联的文件名。然后，当用户单击按钮一次上载所有文件时，您可以在回调函数中插入一行内容，以便

发送

侦听器将相关文件的

输入

字段值添加到

表单数据中，如下所示：

formData.append("somefield", document.getElementById("myinput_" + file.name));

myDropzone.on("addedfile", function(file) {
    document.getElementById("#file_container_div").innerHTML += '<input type="text" id="myinput_' + file.name + '" value="">';
    // Your other code goes here...
});

myDropzone.on("sending", function(file, xhr, formData) {
    formData.append("somefield", document.getElementById("myinput_" + file.name));
    // Your other code goes here...
});

由于声明在发送每个文件之前触发事件，因此将以这种方式单独处理每个文件

最终，您的解决方案可能会有这样一个片段：

formData.append("somefield", document.getElementById("myinput_" + file.name));

myDropzone.on("addedfile", function(file) {
    document.getElementById("#file_container_div").innerHTML += '<input type="text" id="myinput_' + file.name + '" value="">';
    // Your other code goes here...
});

myDropzone.on("sending", function(file, xhr, formData) {
    formData.append("somefield", document.getElementById("myinput_" + file.name));
    // Your other code goes here...
});

myDropzone.on（“addedfile”，函数（文件）{
document.getElementById（“#file_container_div”）.innerHTML+=”；
//你的其他代码在这里。。。
});
on（“发送”，函数（文件、xhr、formData）{
append（“somefield”，document.getElementById（“myinput_3;”+file.name））；
//你的其他代码在这里。。。
});

---

当然，您最终选择实施的解决方案需要进行一些定制，以满足您的需求，但这应该足以表达您的概念。

应该在哪里添加？对于每个单独的预览/文件，应该有一个

表单

块，它应该围绕您希望随文件上载一起提交的任何

输入

字段。例如，只需在代码中放置一行

，即可创建一个要删除文件的区域。我应该修改我的回答中说将

input

字段附加到代码中的

div

的部分，并建议您将它们附加到

previewTemplate

中的

div

。这样，

输入

字段应该在

表单

块中，因为它们已附加到

预览模板

中。在表单中，我成功地将数据与图像一起发送。我没有成功地添加多个图像以及多个图像上传。