Multiple File Upload using Dropzone JS in PHP
Using this library, we can easily drag and drop more than one file uploading. The use of the Dropzone JS library is very easy. This library provides us the facility of validation such as specific extensions, max file upload, etc. In the given example, we will explain the use of dropzone.js to upload more than one image and build more than one file. In our example, we will also build a better layout by using the bootstrap. The step to upload images and build files is as follows:
- Create a file named index.php
- Create a file named upload.php
- Create a folder named upload
We can upload the image by using the given step-by-step process. We have described three steps, which are able to provide full knowledge of image upload. In our below example, we will import by using the dropzone.js cdn. If we want to download it, we can do it in our local. The steps to upload images are as follows:
In this step, we are going to create index.php file. We will use root folder to create this file. In order to perform this, we are going to use the following code and put it on index.php file. The CDN is used in this file for JS, JQuery, Bootstrap and Dropzone CSS, which is described as follows:
In this step, we are going to create upload.php file. We will use the root folder to create this file. This file will write the code of image upload, which is described as follows:
This is the last step, and in this step, we are going to create upload folder. In our example, we need to store images. That’s why we will create an upload folder. Uploads can also have different names. We should also be careful to change on upload.php file.
Now our above example is ready to run. So we will use our root folder to run the following command.
Now, we will use our browser and open the URL, which is described as follows:
When we open this URL on our browser, we will get some output, which is described as follows: