PHP Dropzone File Upload on Button Click Example

By Hardik Savani May 14, 2024 Category : PHP

This tutorial will provide example of files upload on button click in php dropzone. you will learn php dropzone file upload with submit button. you'll learn file upload on button click in php dropzone. We will use dropzone upload all files on button click.

We always prefer to use dropzone js for drag and drop multiple file uploading but as we know it's always upload file when you select image or file. so if you require to upload images on click on submit button then i will help you how to upload all files on button click event using dropzone and php.

So, today i going to give you example of How to build multiple file or image uploads using dropzone.js library. In this example i also use bootstrap also that way we can build better layout. In this tutorial you can see demo of multiple image upload and also download full code of this script. You have to just do few steps as listed bellow:

1. Create index.php file

2. Create upload.php file

3. Create uploads folder

In this three step you can get full example of image upload, In this example i use dropzone.js cdn for import, you can also download in your local. So let's see bellow preview and follow step:

Preview:

Step 1: Create index.php file

In first step we have to create index.php file in our root folder and copy bellow code and put on that file. In this file i use cdn for bootstrap, jquery, dropzone css and js.

we will write click event for button and when you click on that button then and then images will upload to server.

So let's follow:

index.php

<!DOCTYPE html>
<html>
<head>
  <title>PHP Dropzone File Upload on Button Click Example</title>
  <script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script>
  <link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css">
  <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>
</head>
<body>
  
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h2>PHP Dropzone File Upload on Button Click Example</h2>
      <form action="upload.php" enctype="multipart/form-data" class="dropzone" id="image-upload">
        <div>
          <h3>Upload Multiple Image By Click On Box</h3>
        </div>
      </form>
      <button id="uploadFile">Upload Files</button>
    </div>
  </div>
</div>
  
<script type="text/javascript">
  
    Dropzone.autoDiscover = false;
  
    var myDropzone = new Dropzone(".dropzone", { 
       autoProcessQueue: false,
       maxFilesize: 1,
       acceptedFiles: ".jpeg,.jpg,.png,.gif"
    });
  
    $('#uploadFile').click(function(){
       myDropzone.processQueue();
    });
      
</script>
  
</body>
</html>

Step 2: Create upload.php file

In first step we have to create upload.php file in our root folder. In this file i write image upload folder code.

upload.php

<?php

$uploadDir = 'uploads';

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

?>

Read Also: Laravel - Multiple Images Uploading using dropzone.js Example

Step 3: Create uploads folder

In last step, we have to just create "uploads" folder for store images. You can also give different name from uploads, But make sure also change on upload.php file.


Ok, now we are ready to run this example, so just run bellow command on root folder for run your project.

php -S localhost:8000

Now you can open bellow url on your browser:

Read Also: PHP Multidimensional Array Search By Value Example
http://localhost:8000

I hope it can help you...

Tags :
Previous

Angular Image Upload with Crop, Zoom, Scale, Preview Tutorial
Next

How to Allow Only One File to Upload in Dropzone?

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares