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's website suggests您可以通过注册sending事件并使用包含三个参数的回调函数来提交文件以外的任何数据：file，xhr，和formData。在此回调函数中，您可以将其他自定义字段附加到formData以作为POST数据与文件一起提交。请注意，此实现需要您使用HTML <form>。

在您的情况下，由于您在单击按钮时尝试为每个图像发送单独的input字段，因此可以通过在文件中附加新的input字段来实现此目的每次触发div事件时，您的网页上都会显示容器addfile，为每个input字段分配id myinput_<filename>，其中<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和单个输入字段进行多次上传

1 个答案: