如何在 dropzone.js 中显示每个选定文件的选择字段

Question

我的 dropzone.js 有问题。当我 select 拖放区中的一个或多个文件时，我想为每个文件显示一个 select 字段。请参见下图中的拖放区。我不知道如何解决这个问题，我已经搜索过这个问题，但没有得到答案。预先感谢您的帮助

这是我的表格。

<form action="{{route('mediamanager.store')}}" class="dropzone dropzone-nk needsclick" id="my-awesome-dropzone" method="post" enctype="multipart/form-data">
  {{ csrf_field() }}
  <div>
    <i class="notika-icon notika-cloud"></i>
    <div class="fallback">
      <input name="file" type="file" multiple />
    </div>
    <h2>Drop files here or click to upload.</h2>
  </div>
  </div>
  <br>
  <div class="text-center">
    <input type="button" class="btn-success submit-merge" id="merge_file" value="Merge and Upload as one file" style="padding:0.8em">

    <input type="button" class="btn-success submit-separate" id="separate_file" value="Save each file separatly">
  </div>
</form>

这是我的 dropzone.js 脚本。

<script>



Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element

    // The configuration we've talked about above
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 25,
    maxFiles: 25,
    addRemoveLinks: true,
    acceptedFiles:'.pdf',

    // The setting up of the dropzone
    init: function() {
        var myDropzone = this;

        var input = 'Null';


        $(".submit-merge").click(function (e) 
        {
            e.preventDefault();
            e.stopPropagation();

            if (myDropzone.getQueuedFiles().length < 2) 
            { 
                $('.alert-danger').show();
                $('#error_msg').html("<i class='fas fa-exclamation-circle'></i> The merge files must be greater than one file");
                return false;
            }
            if($('#merge_name').val() == "")
            {
                $('.alert-danger').hide();
                $('.merge_name').show();
            }
            else
            {
                input = 'merge_file';
                myDropzone.processQueue();
            }
        });

        $(".submit-separate").click(function (e) {
            e.preventDefault();
            e.stopPropagation();
            input = 'separate_file';
            myDropzone.processQueue();

        }); 

        this.on('addedfile', function(file){
            var fileBox = $(file.previewElement).hide();

            setTimeout(function(){
                fileBox.fadeIn('fast');
            }, file.delay);
        });

        // $(".submit-separate").click(function (e) {
        this.on("sendingmultiple", function(file, xhr, formData) {
        //Add additional data to the upload
            formData.append(input, $('#'+input).val());
            formData.append("filesize", file.size);
        });

        this.on("success", function(file, responseText) {
            location.reload();
        });

        this.on("error", function(file, response) {
                // do stuff here.
            $('.alert-danger').show();
            $('#error_msg').html("<i class='fas fa-exclamation-circle'></i>"+ response);
        });

    }


}

</script>

Answer 1

终于，我做到了。当一个文件被添加到 dropzone 他们添加 inline-block div, 在这个 div 他们添加一个class dz-preview 所以请将您的输入附加到每个最后 child。只需将以下代码添加到您的 dropzone 脚本中即可。

this.on("addedfile", function() 
{ 
  $(".dz-preview:last").append('<br> <select class="form-control" name="type[]"><option>Blueprint</option><option>Specbook</option><option>Proposal</option><option>Large color print</option></select> '); 
});

如何在 dropzone.js 中显示每个选定文件的选择字段

How to show selects field with each selected file in dropzone.js

javascript

laravel-5

dropzone.js

dropzone