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

Question

创建了一个表格，可以上传多个文件而不会出现问题。 现在尝试在公司输入字段中上传到每个文件。 我遵循了Dropzone的示例，该示例没有<form>即可执行此操作。 现在，我很难将<input>字段与图像一起传递到upload-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>

JS

var previewNode = document.querySelector( '#template' );
previewNode.id = '';
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild( previewNode );

var myDropzone = new Dropzone( document.body, {
    url: 'scripts/cardnew.php',
    thumbnailWidth: 150,
    thumbnailHeight: 204,
    parallelUploads: 20,
    previewTemplate: previewTemplate,
    autoQueue: false,
    previewsContainer: '#previews',
    clickable: '.fileinput-button',
    addRemoveLinks: false
} );

myDropzone.on( 'addedfile', function( file ) {
    file.previewElement.querySelector( '.start' ).onclick = function() { myDropzone.enqueueFile( file ); };
} );
myDropzone.on( 'totaluploadprogress', function( progress ) {
    document.querySelector( '#total-progress .progress-bar' ).style.width = progress + '%';
} );
myDropzone.on( 'sending', function( file ) {
    document.querySelector( '#total-progress' ).style.opacity = '1';
    file.previewElement.querySelector( '.start' ).setAttribute( 'disabled', 'disabled' );
} );
myDropzone.on( 'queuecomplete', function( progress ) {
    document.querySelector( '#total-progress' ).style.opacity = '0';
} );

Answer 1

Dropzone.js的网站建议您通过注册sending事件并使用带有三个参数的回调函数file ， xhr和formData来提交除文件之外的任何数据。 然后，在此回调函数中，您可以将其他自定义字段附加到formData ，以与文件一起作为POST数据提交。 请注意，此实现将要求您使用HTML <form> 。

在您的情况下，由于您尝试在单击按钮时随每个图像发送一个单独的input字段，因此可以通过在每次触发addfile事件时向页面上的文件容器div追加一个新的input字段来实现此目的，为每个input字段分配一个myinput_<filename>的id ，其中<filename>是与新添加的input字段相关联的文件的名称。 然后，当用户单击按钮一次上传所有文件时，您可以在sending侦听器的回调函数中插入一行，以将相关文件的input字段值添加到formData如下所示：

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

由于Dropzone.js的sending文档说该事件是在发送每个文件之前触发的，因此将以这种方式分别处理每个文件。

最终，您的解决方案可能具有以下片段：

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...
});

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