Skip to content

All topics  /  PHP

PHP Dropzone File Upload on Button Click Tutorial

PHP ·

Teams applying “PHP Dropzone File Upload on Button Click Tutorial” in a production project can use the official article to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the PHP project and test it against the project’s actual database and runtime.

Hi Guys,

Today, I will learn you how to dropzone file upload on button click in php.you will learn php dropzone file upload with submit button. you'll learn file upload on button click in php dropzone. I will use dropzone upload all files on button click.

In this example,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.

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.

Step 1: Create index.php file


In this 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.

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

Here In this 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);
}
?>

Step 3: Create uploads folder

In this 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.

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: 

http://localhost:8000

It will help you...

More on this topic