PHP – multiple file uploading dropzone js example

PHP – multiple file uploading dropzone js example

In this post we will give you information about PHP – multiple file uploading dropzone js example. Hear we will give you detail about PHP – multiple file uploading dropzone js exampleAnd how to use it also give you demo for it if it is necessary.

We always require to make multiple file or image uploading function in our common website or project. We use input with multiple with image upload but it’s not looks great and user does not like pretty much, so you should make it better. Image uploads is very common for all website, But if you are working on PHP or any PHP framework like laravel, codeigniter, yii etc then you can simply use dropzoneJS library.

Dropzone JS Library provide us to drag and drop multiple file uploading. Dropzone JS is a open source javascript library. Dropzone JS library is very simple to use. Dropzone JS also provide us to validation like max file upload, specific extension etc.

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. So let’s follow:

index.php

<!DOCTYPE html>

<html>

<head>

<title>PHP - Multiple Image upload using dropzone.js</title>

<script src="http://demo.onlinecode/plugin/jquery.js"></script>

<link rel="stylesheet" href="http://demo.onlinecode/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 >

<div >

<div >

<h2>PHP - Multiple Image upload using dropzone.js</h2>

<form action="upload.php" enctype="multipart/form-data" id="image-upload">

<div>

<h3>Upload Multiple Image By Click On Box</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 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);

}


?>

Also see:Crop, Resize, Frames etc on selected image in php using Aviary

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:

Also see:AngularJS – simple image upload with preview example in PHP

http://localhost:8000

Video

I hope it can help you…

Hope this code and post will helped you for implement PHP – multiple file uploading dropzone js example. 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

Leave a Comment

Your email address will not be published. Required fields are marked *

5  +  4  =  

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US