在不自动上传的情况下使用 dropzone

Question

我想使用拖放区拖放多文件上传器。它所做的事情是使用 Ajax 自动将文件上传到服务器。但我希望它执行另一个功能。我希望每当我 select 一个文件时，它应该创建一个 <input type="file" name="file1"><input type="file" name="file2"> 等等，每个字段都包含该文件。所以，最后我点击提交按钮。那我应该可以手动上传了。

场景是我要上传产品。通过拖放，我将上传产品图片。我知道这张照片可以上传并且值可以保存到数据库但是，在我还没有提交表格的时候还没有产品 ID。在图像选项卡中有一个字段，我们可以在其中输入产品 ID。任何实现这一目标的建议。

Answer 1

您应该将 autoProcessQueue 参数设置为 false。

你可以这样做:

HTML - 添加按钮

<form action="your_action" class="dropzone" id="your_form_id">
     <div class="fallback">
         <input name="file" type="file" />
     </div>
</form>

<button type="button" id="btn_upload">Upload</button>

JavaScript - 将 autoProcessQueue 设置为 false，在按钮 ID 上添加点击事件并触发 processQueue 事件以上传文件

Dropzone.options.your_form_id = {
    autoProcessQueue: false,

    init: function (e) {

        var myDropzone = this;

        $('#btn_upload').on("click", function() {
            myDropzone.processQueue(); // Tell Dropzone to process all queued files.
        });

        // Event to send your custom data to your server
        myDropzone.on("sending", function(file, xhr, data) {

            // First param is the variable name used server side
            // Second param is the value, you can add what you what
            // Here I added an input value
            data.append("your_variable", $('#your_input').val());
        });

    }
};

在不自动上传的情况下使用 dropzone

use dropzone without auto uploading

javascript

jquery

file-upload

dropzone.js