Javascript DropZoneJS File Uploading Library Drag Drop ProgressBar with PHP Full Example

Javascript DropZoneJS File Uploading Library Drag Drop ProgressBar with PHP Full Example

Welcome folks today in this tutorial we will e talking about drag ad drop file uploads using dropzone js library in php full example.

 

In this video i have explained you step by step the process which is required to make the file upload using this library.

1. Download and Include

  • Download Dropzone.js library from here.
  • Include dropzone.css and dropzone.js files in your page.
See also  Node.js Express Upload Files on Server With Custom Name Using Multer Library in Javascript Full Example Project For Beginners

you can also include from the cdn also.

<link href='dropzone.css' type='text/css' rel='stylesheet'>
<script src='dropzone.js' type='text/javascript'></script>

 

<!doctype html>
<html>
 <head>
 <link href="style.css" rel="stylesheet" type="text/css">
 <link href="dropzone.css" rel="stylesheet" type="text/css">
 <script src="dropzone.js" type="text/javascript"></script>
 </head>
 <body >
 <div class="container" >
  <div class='content'>
   <form action="upload.php" class="dropzone" id="dropzonewidget">
 
   </form> 
  </div> 
 </div>
 </body>
</html>

 

See also  Build a Fancy or Stylish Text Generator With Emoji's & Fonts For Instagram Web App in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

PHP Code

 

<?php
$target_dir = "upload/";
$target_file = $target_dir . basename($_FILES["file"]["name"]);

if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_dir.$_FILES['file']['name'])) {
   $status = 1;
}

Leave a Reply