如何使用不同的按钮提交 dropzone.js答案

【问题标题】：how to submit dropzone.js with different buttons如何使用不同的按钮提交 dropzone.js
【发布时间】：2019-06-29 05:19:39
【问题描述】：

我在 Laravel 中使用 dropzone.js。

我正在使用两个不同的按钮提交文件（见下图）。

当点击合并并上传为一个文件时，我想将此按钮值发送到控制器。

当分别保存每个文件时，我想发送这个按钮值控制器。

我采用了一个全局变量input，它工作正常，但问题是当我点击按钮时，它发送的是旧值而不是当前值。

感谢您的帮助。

这是我的表格：

<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 的脚本：

<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,
    acceptedFiles:'.pdf',

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


        $(".submit-merge").click(function (e) 
        {
            alert('
                    <input >
            ');
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();

            input = 'merge_file';

            console.log(input);
        });



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

            input = 'separate_file';
            console.log(input);
        }); 
        // });

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

        this.on("success", function(file, responseText) {
            // location.reload();
            console.log('dfd');
        });

    }
}

</script>

【问题讨论】：

顺便说一句，不相关，但在您的 br 标记之前有两个结束 divs。你只需要一个。

标签： javascript laravel-5 dropzone.js dropzone

【解决方案1】：

您正在更改processQueue() 之后的输入值。

代替

    $(".submit-merge").click(function (e) {
        alert('
                <input >
        ');
        e.preventDefault();
        e.stopPropagation();
        myDropzone.processQueue();

        input = 'merge_file';

        console.log(input);
    });



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

        input = 'separate_file';
        console.log(input);
    });

试试：

    $(".submit-merge").click(function (e) {
        alert('
                <input >
        ');
        e.preventDefault();
        e.stopPropagation();

        input = 'merge_file';
        console.log(input);

        myDropzone.processQueue();
    });



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

        input = 'separate_file';
        console.log(input);

        myDropzone.processQueue();
    });

【讨论】：