03-Apr-2023
.
Admin
In this article, I will show you how to drag and drop file upload using dropzone js and php. Dropzone JS Library provide us to drag and drop multiple file uploading. Dropzone JS is a open source javascript library.
We will require to make file and image uploading function in our common websites or project. so then you can use bellow example to uploading file using dropzone js.
So, today i will give you example of drag and drop file upload using dropzone js and php. In this example i will use bootstrap also that way we can show better layout. I will give you full example you will follow step by step.
Step 1 : Create index.php File
In this step you can create index.php file in our root folder and copy bellow code.
index.php
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop File Upload using Dropzone JS and PHP - NiceSnippets.com</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>Drag and Drop File Upload using Dropzone JS and PHP - NiceSnippets.com</h2>
<form action="upload.php" enctype="multipart/form-data" class="dropzone" id="image-upload">
<div>
<h3>Drag and Drop File</h3>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
Dropzone.options.imageUpload = {
maxFilesize:1,
acceptedFiles: ".jpeg,.jpg,.png,.gif"
};
</script>
</body>
</html>
Step 2 : Create upload.php File
In this step we will create upload.php file in our root folder. In this file i write image uplaod 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 upload folder
In this step, We have create "uploads" folder for store images. You can also give different name from uploads.
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:
http://localhost:8000
It will help you...
#PHP
#Laravel 7
