使用dropzone而不自动上传

Question

我想使用drop zone拖放多个文件up-loader.它所做的是使用Ajax自动将文件上传到服务器.但是我希望它能够执行另一个功能.我希望每当我选择一个文件时,它应该创建一个<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上添加click事件并触发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());
        });

    }
};