How to upload multiple files using dropzone.js?

杀马特。学长 韩版系。学妹 提交于 2021-02-11 13:35:19

问题


My problem is when i drag & drop multiple file that time each image called particulate ajax. I want to multiple file upload time only one ajax call.

I want to choose single one file drag & drop it in dropzone after another file drag & drop it so not replace file to first one I need both of theme and click on button that time save in folder at one time ajax call.

Here is my code

HTML file

<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js"></script>

<div class="row">
    <form action="route.php?actionPresubmission=loanPreSubmission" class="form-horizontal dropzone" id="imageform">
    </form>
</div>

route.php

$uploadDir = 'upload';
   if (!empty($_FILES)) {
    $tmpFile = $_FILES['file']['tmp_name'];     
    $filename = $uploadDir.'/'.time().'-'. $_FILES['file']['name'];
        move_uploaded_file($tmpFile,$filename);
    }

Thanks


回答1:


Interpreting the question, I think you want to upload multiple files through one call. For that, you need to stop autoProcessQueue which is true by default

Script:

Dropzone.options.myDropzone = {
        autoProcessQueue: false, //This stops auto processing
        acceptedFiles:".png,.jpg", //Change it according to your requirement.
        init: function(){
            var submit = document.querySelector('#submit');
            mydropzone = this;
            submit.addEventListener("click", function(){
                mydropzone.processQueue();
            });
            this.on("success", function(file,response){
               alert(response);
            });
        },
    };

HTML:

<form action="upload.php" class="dropzone" id="myDropzone"></form>
<div>
    <button type="button" class="btn btn-info" id="submit">Upload</button>
</div>

PHP

<?php
$folderName = 'upload/';
if(!empty($_FILES))
{
    $file = $_FILES['file']['tmp_name'];
    $fileLocation = $folderName . $_FILES['file']['name'];
    move_uploaded_file($file,$fileLocation);
} ?>

Hope this helped you :)



来源:https://stackoverflow.com/questions/56129448/how-to-upload-multiple-files-using-dropzone-js

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!