PHP : Upload multiple file using dropzone.js with drag and drop features

onlinecode

2 years ago

PHP : Upload multiple file using dropzone.js with drag and drop features

In this post we will give you information about PHP : Upload multiple file using dropzone.js with drag and drop features. Hear we will give you detail about PHP : Upload multiple file using dropzone.js with drag and drop featuresAnd how to use it also give you demo for it if it is necessary.

In this PHP Tutorial, I will tell you how to upload multiple files using dropzone.js plugin with drag and drop features.

It’s very easy to upload files to the server with PHP script.

You will need a HTML form with PHP script to allow user to upload files to the server.

In PHP, There is a global PHP variable $_FILES that keeps all the information related to uploaded files.

Basically files are stored into a temporary directory and then you use PHP script to move files to target destination.

With dropzone.js, You can see the nice progress bar while uploading files to server.

You need to have a simple form element with the class “dropzone” to use dropzone features.

For this example :

Create a folder “uploads” to save all uploaded files.

Create a file “index.php” for form element.

Create a file “upload.php” to handle backend file upload process.

Step 1 : Create File “index.php” to upload file

First we will create a file “index.php” with simple HTML form to upload file.

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1">
<title>Laravel: upload multiple file using dropzone.js</title>
<linkhref="//css/dropzone.css"rel="stylesheet">
<scriptsrc="//js/dropzone.js"></script>
</head>
<body>
<h3>PHP : Upload multiple file using dropzone.js with drag and drop features</h3>
<formaction="upload.php"class="dropzone">
</form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel: upload multiple file using dropzone.js</title>
    <link href="//css/dropzone.css" rel="stylesheet">
    <script src="//js/dropzone.js"></script>
</head>
<body>

<h3>PHP : Upload multiple file using dropzone.js with drag and drop features</h3>
<form action="upload.php" >

</form>

</body>
</html>

Step 2: Create file “upload.php” to process the uploaded file

Now in this step, We will create a upload.php to process the uploaded files.

<?php
$targetDir='uploads/';
if(!empty($_FILES)){
$targetFile=$targetDir.time().'-'.$_FILES['file']['name'];
move_uploaded_file($_FILES['file']['tmp_name'],$targetFile);
}
?>

<?php

$targetDir = 'uploads/';

if (!empty($_FILES)) {
 $targetFile = $targetDir.time().'-'. $_FILES['file']['name'];
 move_uploaded_file($_FILES['file']['tmp_name'],$targetFile);
}

?>

Laravel 5 – Multiple Images Uploading with drag and drop using dropzone.js example

Show Demo

Label :

PHP

File

HTML

How To

Web Development

Dropzone

Hope this code and post will helped you for implement PHP : Upload multiple file using dropzone.js with drag and drop features. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github