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

Question

创建了一个可以毫无问题地上传多个文件的表单。现在尝试在上传前在每个文件的公司输入字段中输入。我遵循了 Dropzone 的一个示例，该示例在没有 <form> 的情况下执行此操作。现在我很难将 <input> 字段连同图像一起传递给上传-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's website suggests 您可以通过注册 sending 事件并使用具有三个参数的回调函数来提交除文件之外的任何数据：file、xhr，以及 formData。在此回调函数中，您可以将其他自定义字段附加到 formData 以作为 POST 数据与文件一起提交。请注意，此实现将要求您使用 HTML <form>.

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

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

既然Dropzone.js documentation for 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...
});

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

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

Multiple upload with Dropzone and inividual input fields

javascript

jquery

dropzone.js