javascript - 如何使用不同的按钮提交 dropzone.js

Question

我在 Laravel 中使用 dropzone.js。

我使用两个不同的按钮提交文件(见下图)。

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

当单击单独保存每个文件时，我想发送此按钮值 Controller 。

我采用一个全局变量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>

这是放置区的脚本:

<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>

Answer 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();
    });