{"id":464,"date":"2019-08-31T20:42:07","date_gmt":"2019-08-31T20:42:07","guid":{"rendered":"http:\/\/www.programmingfields.com\/?p=464"},"modified":"2026-05-02T06:32:35","modified_gmt":"2026-05-02T06:32:35","slug":"jquery-file-upload-in-php","status":"publish","type":"post","link":"https:\/\/programmingfields.com\/jquery-file-upload-in-php\/","title":{"rendered":"Drag and Drop Multiple File Upload in PHP Using Dropzone js"},"content":{"rendered":"\n<p>If you want to upload multiple files in PHP then you will require to read the files in the form of an array. It will push file one by one from the source path to the destination path using the loop. But in this case, you cannot achieve the simplicity of the file upload. You will have to choose the multiple files by clicking on the browse file. So to achieve the drag and drop file uploading in PHP, I am going to use the <strong>jQuery file upload<\/strong>. I have already shown you the <a rel=\"noreferrer noopener\" aria-label=\"PHP file upload using jQuery and Ajax (opens in a new tab)\" href=\"https:\/\/www.programmingfields.com\/php-file-upload-using-jquery-and-ajax\/\" target=\"_blank\">PHP file upload using jQuery and Ajax<\/a>. It was a simple way to upload a single file without refreshing the form. Here, I&#8217;ll be showing you the multiple file upload in PHP using dropzone.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/programmingfields.com\/jquery-file-upload-in-php\/#jQuery_File_Upload\" >jQuery File Upload<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/programmingfields.com\/jquery-file-upload-in-php\/#jQuery_File_Upload_Using_Dropzone_Js\" >jQuery File Upload Using Dropzone Js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/programmingfields.com\/jquery-file-upload-in-php\/#Upload_Files_in_PHP\" >Upload Files in PHP<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/programmingfields.com\/jquery-file-upload-in-php\/#Save_Files_into_the_Database\" >Save Files into the Database<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/programmingfields.com\/jquery-file-upload-in-php\/#Create_Database_Connection\" >Create Database Connection<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/programmingfields.com\/jquery-file-upload-in-php\/#Save_Filename_into_the_database\" >Save Filename into the database<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/programmingfields.com\/jquery-file-upload-in-php\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"jQuery_File_Upload\"><\/span>jQuery File Upload<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The jQuery provides the library for drag and drop file upload which is dropzone. This is the open-source library which previews the images after the upload. So, I will integrate the <strong>dropzone js library<\/strong> for uploading the multiple files as drag and drop in the PHP. <\/p>\n\n\n\n<p>Also, I will store the uploaded file name into the database. So let&#8217;s create a project first.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"jQuery_File_Upload_Using_Dropzone_Js\"><\/span>jQuery File Upload Using Dropzone Js<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the initial step, you will have to download the <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/www.dropzonejs.com\" target=\"_blank\">Dropzone Js <\/a>library from the official website. <\/li>\n\n\n\n<li>Also, you can download the complete files like <strong>JS<\/strong> and <strong>CSS<\/strong> from the <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/github.com\/enyo\/dropzone\" target=\"_blank\">Github<\/a>.<\/li>\n\n\n\n<li>Once you downloaded the files, just paste the files into your project directory.<\/li>\n\n\n\n<li>Now, create the<strong> index.php<\/strong> file and paste the below code.<\/li>\n<\/ul>\n\n\n\n<pre title=\"index.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n\t&lt;head&gt;\n\t&lt;meta charset=\"utf-8\"&gt;\n\t&lt;title&gt;Dropzone Multiple File Upload in PHP&lt;\/title&gt;\n\t&lt;link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0\/css\/bootstrap.min.css\" integrity=\"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW\/dAiS6JXm\" crossorigin=\"anonymous\"&gt;\n\n\t&lt;!--------- Dropzone JS and CSS file ---------&gt;\n\t&lt;script src=\".\/dropzone.js\"&gt;&lt;\/script&gt;\n\t&lt;link rel=\"stylesheet\" href=\".\/dropzone.css\"&gt;\n\n\t&lt;!----------- Custom CSS -------&gt;\n\t&lt;style&gt;\n\n\t\tbody{\n\t\t\tbackground-color: #054b4ebd;\n\t\t}\n\n\t\t.dropzone {\n\t\t\tborder: 2px dashed rgb(65, 65, 149);\n\t\t\tmax-height: 400px;\t\n\t\t\tpadding: 0px 20px !important;    \n\t\t}\n\n\t\tspan {\n\t\t\tfont-size: 25px;\t\t\n\t\t}\n\t\t\n\t\t#icon {\n\t\t\tmax-width: 150px;\n\t\t}\n\t&lt;\/style&gt;\n\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;div class=\"container pt-5\"&gt;\n\t&lt;div class=\"row\"&gt;\n\t\t&lt;div class=\"col-md-8 m-auto\"&gt;\n\t\t\t&lt;form action=\".\/upload.php\" class=\"dropzone\"&gt;&lt;\/form&gt;\t\t\t\n\t\t&lt;\/div&gt;\n\t&lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;script src=\"https:\/\/code.jquery.com\/jquery-3.2.1.slim.min.js\"&gt;&lt;\/script&gt;\n&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.12.9\/umd\/popper.min.js\"&gt;&lt;\/script&gt;\n&lt;script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0\/js\/bootstrap.min.js\"&gt;&lt;\/script&gt;\n\n&lt;!----------- Custom JS ---------------&gt;\n&lt;script&gt;\n\t$(document).ready(function() {\n\t\t$(\"span\").html(\"&lt;h3&gt;Drop files here &lt;br\/&gt; Or &lt;\/h3&gt; &lt;small&gt; Click to Upload&lt;\/small&gt;\");\n\t\t$(\"span\").css('text-align', 'center');\n\n\t\t$(\"&lt;div&gt;&lt;img src='.\/upload-icon.png' class='img-rounded' id='icon'&gt;&lt;\/div&gt;\").insertAfter(\"span\");\n\t});\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the above code, I have integrated the <strong>Bootstrap CDN<\/strong> (not necessary).<\/li>\n\n\n\n<li>Then, I have linked the dropzone JS and CSS file which has downloaded.<\/li>\n\n\n\n<li>Created a form with action. In the action, I have passed a PHP page URL in which, I will move the file from source to destination. Also, I will be storing the file name into the database.<\/li>\n\n\n\n<li>Save and execute the above script to see the result as below.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"931\" height=\"492\" src=\"https:\/\/i0.wp.com\/www.programmingfields.com\/wp-content\/uploads\/2019\/08\/jQuery-file-upload-using-dropzone.png?resize=931%2C492&#038;ssl=1\" alt=\"jQuery Multiple File Upload\" class=\"wp-image-488\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/jQuery-file-upload-using-dropzone.png?w=931&amp;ssl=1 931w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/jQuery-file-upload-using-dropzone.png?resize=300%2C159&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/jQuery-file-upload-using-dropzone.png?resize=768%2C406&amp;ssl=1 768w\" sizes=\"auto, (max-width: 931px) 100vw, 931px\" \/><figcaption class=\"wp-element-caption\"><strong>PHP Multiple File Upload Using Dropzone Js<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/www.programmingfields.com\/dropdown-selection-filter-in-php-using-jquery-ajax\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Dependent Dropdown Filter in PHP Using jQuery and Ajax (opens in a new tab)\">Dependent Dropdown Filter in PHP Using jQuery and Ajax<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Upload_Files_in_PHP\"><\/span>Upload Files in PHP<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the next step, create a folder in the project directory in which the files will be uploaded. (In my case, the folder name is <strong>uploads<\/strong>.<\/li>\n\n\n\n<li>Here the form action is <strong>upload.php<\/strong>. So, create a new file named <strong>upload.php<\/strong> and paste the following code.<\/li>\n<\/ul>\n\n\n\n<pre title=\"upload.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\t\n\t\/\/ ------------- Check if file is not empty ------------\n\tif(!empty($_FILES)) {\n\n\t\t$fileName \t\t\t\t=\t\t\t$_FILES['file']['name'];\n\n\t\t$source_path \t\t\t=\t\t\t$_FILES['file']['tmp_name'];\n\n\t\t$fileExtension\t\t\t=\t\t\tpathinfo($fileName, PATHINFO_EXTENSION);\n\n\n\t\t\/\/ ------ Replacing file name with new file name ---------\n\t\t$targetFile\t\t\t\t=\t\t\ttime().\"-\".time().\"-\".strtolower(str_replace(\" \",\"-\",$fileName));\n\n\t\t$target_path \t\t\t=\t\t\t\".\/uploads\/\".$targetFile;\n\n\t\tif(move_uploaded_file($source_path, $target_path)) {\n\t\t\techo \"File uploaded successfully\";\n\t\t}\t\t\n\t}\n?&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the above code, I have read the files from the dropzone js which is sent from the <strong>index.php<\/strong> file.<\/li>\n\n\n\n<li>Then got the file extension of the uploaded file.<\/li>\n\n\n\n<li>For suitability of the filename, I have replaced the old file name into a new one by replacing the current date-time using the <a href=\"https:\/\/www.php.net\/manual\/en\/function.time.php\">time<\/a><a rel=\"noreferrer noopener\" aria-label=\"() (opens in a new tab)\" href=\"https:\/\/www.php.net\/manual\/en\/function.time.php\" target=\"_blank\">()<\/a> function.<\/li>\n\n\n\n<li>In the next step, I have moved the file from source path to the destination path which is in the <strong>uploads <\/strong>folder with the new file name.<\/li>\n\n\n\n<li>Here, is the preview of the result.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1098\" height=\"450\" src=\"https:\/\/i0.wp.com\/www.programmingfields.com\/wp-content\/uploads\/2019\/08\/jQuery-File-Upload-Drag-and-Drop.gif?fit=1024%2C420&amp;ssl=1\" alt=\"Drag and drop file upload\" class=\"wp-image-490\"\/><figcaption class=\"wp-element-caption\"><strong>Preview jQuery Drag and Drop File Upload<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/www.programmingfields.com\/php-import-csv-file-with-preview\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Import CSV File Data into MySQL Database Using PHP (opens in a new tab)\">Import CSV File Data into MySQL Database Using PHP<\/a><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You can see in the uploads folder, the files are uploaded.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"771\" height=\"265\" src=\"https:\/\/i0.wp.com\/www.programmingfields.com\/wp-content\/uploads\/2019\/08\/uploaded-files.png?resize=771%2C265&#038;ssl=1\" alt=\"Multiple File Upload\" class=\"wp-image-492\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/uploaded-files.png?w=771&amp;ssl=1 771w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/uploaded-files.png?resize=300%2C103&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/uploaded-files.png?resize=768%2C264&amp;ssl=1 768w\" sizes=\"auto, (max-width: 771px) 100vw, 771px\" \/><figcaption class=\"wp-element-caption\"><strong>Uploaded Files in the uploads folder<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p>Now, I will store the uploaded files into the database table too. So let&#8217;s move to the database operations.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/www.programmingfields.com\/ajax-php-form-handling-using-jquery\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Ajax PHP Form Handling Using jQuery  (opens in a new tab)\">Ajax PHP Form Handling Using jQuery <\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Save_Files_into_the_Database\"><\/span>Save Files into the Database<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a new database in phpMyAdmin section.<\/li>\n\n\n\n<li>Then, create a table inside the database.<\/li>\n\n\n\n<li>Here are the database and the table structure.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"sql\" class=\"language-sql\">-- phpMyAdmin SQL Dump\n-- version 4.8.2\n-- https:\/\/www.phpmyadmin.net\/\n--\n-- Host: 127.0.0.1\n-- Generation Time: Aug 31, 2019 at 09:40 PM\n-- Server version: 10.1.34-MariaDB\n-- PHP Version: 7.2.7\n\nSET SQL_MODE = \"NO_AUTO_VALUE_ON_ZERO\";\nSET AUTOCOMMIT = 0;\nSTART TRANSACTION;\nSET time_zone = \"+00:00\";\n\n\n\/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT *\/;\n\/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS *\/;\n\/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION *\/;\n\/*!40101 SET NAMES utf8mb4 *\/;\n\n--\n-- Database: `jquery_file_upload`\n--\n\n-- --------------------------------------------------------\n\n--\n-- Table structure for table `img_upload`\n--\n\nCREATE TABLE `img_upload` (\n  `id` int(11) NOT NULL,\n  `img` varchar(100) NOT NULL,\n  `updated_on` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP\n) ENGINE=InnoDB DEFAULT CHARSET=latin1;\n\n--\n-- Indexes for dumped tables\n--\n\n--\n-- Indexes for table `img_upload`\n--\nALTER TABLE `img_upload`\n  ADD PRIMARY KEY (`id`);\n\n--\n-- AUTO_INCREMENT for dumped tables\n--\n\n--\n-- AUTO_INCREMENT for table `img_upload`\n--\nALTER TABLE `img_upload`\n  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;\nCOMMIT;\n\n\/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT *\/;\n\/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS *\/;\n\/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION *\/;<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/www.programmingfields.com\/jquery-ajax-example-for-loading-data-in-php\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Load MySQL Data in PHP Using jQuery and Ajax (opens in a new tab)\">Load MySQL Data in PHP Using jQuery and Ajax<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_Database_Connection\"><\/span>Create Database Connection<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In the project directory, create a new file named <strong>config.php<\/strong> and paste the below code.<\/p>\n\n\n\n<pre title=\"config.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php \n\t\/\/ ----------------- Database connection ----------------\n\t$hostname \t\t\t=\t\t\t\"localhost\";\n\t$username\t\t\t=\t\t\t\"root\";\n\t$password \t\t\t=\t\t\t\"root\";\n\t$dbname \t\t\t=\t\t\t\"jquery_file_upload\";\n\n\t$conn\t\t\t\t=\t\t\tmysqli_connect($hostname, $username, $password, $dbname) or die(\"Db connect error\" .mysqli_connect_error());\n\n?&gt;<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Please replace your database credentials like username, password and the database name.<\/p>\n<\/blockquote>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Now, include the <strong>db-config.php <\/strong>file in the upload.php file so that it can store the filename into the selected database table.<\/li>\n\n\n\n<li>So, navigate to the <strong>upload.php<\/strong> file and add this single line of code at the top of the file.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">include_once \".\/db-config.php\";<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Save_Filename_into_the_database\"><\/span>Save Filename into the database<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In the next step, add the below code after the <strong>move_uploaded_file() <\/strong>function.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">$sql \t\t\t=\t\t\t\"INSERT INTO img_upload (img) VALUES ('\".$targetFile.\"')\";\n\n$result \t\t=\t\t\tmysqli_query($conn, $sql);\nif($result) {\n\techo \"File uploaded successfully\";\n}<\/code><\/pre>\n\n\n\n<p>So, now the source code of <strong>upload.php<\/strong> will be this.<\/p>\n\n\n\n<pre title=\"upload.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\tinclude_once \".\/db-config.php\";\n\n\t\/\/ ------------- Check if file is not empty ------------\n\tif(!empty($_FILES)) {\n\n\t\t$fileName \t\t\t\t=\t\t\t$_FILES['file']['name'];\n\n\t\t$source_path \t\t\t=\t\t\t$_FILES['file']['tmp_name'];\n\n\t\t$fileExtension\t\t\t=\t\t\tpathinfo($fileName, PATHINFO_EXTENSION);\n\n\n\t\t\/\/ ------ Replacing file name with new file name ---------\n\t\t$targetFile\t\t\t\t=\t\t\ttime().\"-\".time().\"-\".strtolower(str_replace(\" \",\"-\",$fileName));\n\n\t\t$target_path \t\t\t    =\t\t\t\".\/uploads\/\".$targetFile;\n\n\t\tif(move_uploaded_file($source_path, $target_path)) {\n\n\t\t\t\/\/ --------- Inserting into the table ------------\n\t\t\t$sql \t\t\t=\t\t\t\"INSERT INTO img_upload (img) VALUES ('\".$targetFile.\"')\";\n\n\t\t\t$result \t\t=\t\t\tmysqli_query($conn, $sql);\n\t\t\tif($result) {\n\t\t\t\techo \"File uploaded successfully\";\n\t\t\t}\n\n\t\t\telse {\n\t\t\t\techo \"Some error encountered. Please try again.\";\n\t\t\t}\t\t\n\n\t\t}\t\t\n\t}\n?&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To check whether the file is uploading properly run the project.<\/li>\n\n\n\n<li>Drag and drop the multiple files and see the result as a preview.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"917\" height=\"454\" src=\"https:\/\/i0.wp.com\/www.programmingfields.com\/wp-content\/uploads\/2019\/08\/jQuery-file-upload-drag-and-drop.gif?resize=917%2C454&#038;ssl=1\" alt=\"Drag and Drop File Upload in jQuery\" class=\"wp-image-508\"\/><figcaption class=\"wp-element-caption\"><strong>Preview of Drag and Drop Multiple File Upload<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Open the database and check the tables. Here, you can see that the file names are stored in the database table.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"794\" height=\"382\" src=\"https:\/\/i0.wp.com\/www.programmingfields.com\/wp-content\/uploads\/2019\/08\/file-uploaded-in-mysql.png?resize=794%2C382&#038;ssl=1\" alt=\"PHP File Upload\" class=\"wp-image-506\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/file-uploaded-in-mysql.png?w=794&amp;ssl=1 794w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/file-uploaded-in-mysql.png?resize=300%2C144&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/file-uploaded-in-mysql.png?resize=768%2C369&amp;ssl=1 768w\" sizes=\"auto, (max-width: 794px) 100vw, 794px\" \/><figcaption class=\"wp-element-caption\"><strong>Filename in the database table<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<div class=\"wp-block-button aligncenter\"><a class=\"wp-block-button__link has-very-light-gray-color has-text-color has-background wp-element-button\" href=\"http:\/\/www.programmingfields.com\/wp-content\/uploads\/2019\/08\/dropzone.zip\" style=\"background-color:#011235\"> Download Source Code <\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In the resultant, you can see that we have done drag and drop file upload in the jQuery file upload approach for PHP. We used the dropzone js library which is open-source. You can design and use it as per your requirements. This is a simple demo to show you how you can implement the drag and drop features for <strong>jQuery file upload in the PHP<\/strong>. I hope, it will help you. Please let me know if you face any problem regarding this post. I will help you in the comment section.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you want to upload multiple files in PHP then you will require to read the files in the form of an array. It will push file one by one from the source path to the destination path using the loop. But in this case, you cannot achieve the simplicity of the file upload. You [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":512,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[13,4],"tags":[345,346,306,347,304],"yst_prominent_words":[344,312,315,341,342,320,323,293,263,337,336,301,147,311,335,332,348,331,338,310],"class_list":{"0":"post-464","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-jquery","8":"category-php","9":"tag-drag-and-drop-file-upload","10":"tag-dropzone-file-upload","11":"tag-file-upload-in-php-mysql","12":"tag-multiple-file-upload-php","13":"tag-php-file-upload-script","14":"entry"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/Drag-and-Drop-File-Upload-PHP.png?fit=560%2C315&ssl=1","jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/464","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/comments?post=464"}],"version-history":[{"count":3,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/464\/revisions"}],"predecessor-version":[{"id":8924,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/464\/revisions\/8924"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media\/512"}],"wp:attachment":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media?parent=464"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/categories?post=464"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/tags?post=464"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/yst_prominent_words?post=464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}