{"id":398,"date":"2019-08-25T11:16:21","date_gmt":"2019-08-25T11:16:21","guid":{"rendered":"http:\/\/www.programmingfields.com\/?p=398"},"modified":"2026-05-02T06:32:35","modified_gmt":"2026-05-02T06:32:35","slug":"php-file-upload-using-jquery-and-ajax","status":"publish","type":"post","link":"https:\/\/programmingfields.com\/php-file-upload-using-jquery-and-ajax\/","title":{"rendered":"PHP File Upload Using jQuery and Ajax"},"content":{"rendered":"\n<p>When we upload the files in PHP it means we move the files from one location to another. Generally, if we talk about the <strong>PHP file upload<\/strong>, then we know that in every request of the client to the server, the server returns the response with the required data. So, in case of <strong>PHP file upload<\/strong> mainly we move the files from one path to another. In the normal process of PHP file upload, when you click on the button for uploading the files, the form gets to reload. So, today in this post, I will be helping you in uploading the files without refreshing the form. So, I will use the jQuery and Ajax technique. I already posted tutorials on the PHP Ajax technique using jQuery. So let&#8217;s continue.<\/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\/php-file-upload-using-jquery-and-ajax\/#PHP_File_Upload\" >PHP 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\/php-file-upload-using-jquery-and-ajax\/#Create_MySQL_Database_and_Database_Connection\" >Create MySQL Database and Database Connection<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/programmingfields.com\/php-file-upload-using-jquery-and-ajax\/#Create_Database\" >Create Database<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/programmingfields.com\/php-file-upload-using-jquery-and-ajax\/#Create_Database_Connection\" >Create Database Connection<\/a><\/li><\/ul><\/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\/php-file-upload-using-jquery-and-ajax\/#Create_File_Upload_PHP_Form_UI\" >Create File Upload PHP Form (UI)<\/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\/php-file-upload-using-jquery-and-ajax\/#Send_Ajax_Request_For_PHP_File_Upload\" >Send Ajax Request For PHP File Upload<\/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\/php-file-upload-using-jquery-and-ajax\/#Ajax_Request_Handling_For_File_Upload_in_PHP_MySQL_Database\" >Ajax Request Handling For File Upload in PHP MySQL Database<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/programmingfields.com\/php-file-upload-using-jquery-and-ajax\/#File_Upload_in_PHP_MySQL_Database\" >File Upload in PHP MySQL Database<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/programmingfields.com\/php-file-upload-using-jquery-and-ajax\/#Run_the_PHP_File_Upload_Project\" >Run the PHP File Upload Project<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/programmingfields.com\/php-file-upload-using-jquery-and-ajax\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"PHP_File_Upload\"><\/span>PHP File Upload<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Before moving to the functions let&#8217;s know about the file and its attributes. PHP supports the various type of files to upload like image, txt, pdf, doc, etc. Before uploading, you can validate the type of file by the extension of the file. These are the default attributes of the file in the PHP &#8211;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>name &#8211; It defines the name of the file which is uploading.<\/strong><\/li>\n\n\n\n<li><strong>size &#8211; This identifies the size of the file.<\/strong><\/li>\n\n\n\n<li><strong>type &#8211; This is for the type of the file.<\/strong><\/li>\n\n\n\n<li><strong>tmp_name &#8211; It is about the temporary location of the file.<\/strong><\/li>\n<\/ol>\n\n\n\n<p>In this tutorial, I will create a new project for <strong>Ajax file upload PHP<\/strong>. I will use the <a rel=\"noreferrer noopener\" aria-label=\"PHP OOPs (opens in a new tab)\" href=\"https:\/\/www.programmingfields.com\/dropdown-selection-filter-in-php-using-jquery-ajax\/\" target=\"_blank\">PHP OOPs<\/a> methodology to make our project code modular and convenient. So, open the editor and start creating a new project folder. <\/p>\n\n\n\n<p>So, in the initial step, I will create the database and the connection for the project using the OOPs.<\/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=\"Create_MySQL_Database_and_Database_Connection\"><\/span>Create MySQL Database and Database Connection<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_Database\"><\/span>Create Database<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open <strong>phpMyAdmin <\/strong>and create a new database with any name. Below is the SQL statement for creating the database. (in my case it is <strong>ajax_file_upload<\/strong>)<\/li>\n<\/ul>\n\n\n\n<pre title=\"Create Database\" class=\"wp-block-code\"><code lang=\"sql\" class=\"language-sql\">create database ajax_file_upload;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_Database_Connection\"><\/span>Create Database Connection<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>In the previous tutorial, we had seen the <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/www.programmingfields.com\/dropdown-selection-filter-in-php-using-jquery-ajax\/#Create_a_MySQL_Database_Connection_Using_OOPs_Approach\" target=\"_blank\">database connectivity using OOPs in the PHP<\/a><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open the project folder and create a new PHP file (db-config.php) which will create the connection between the database and the application.<\/li>\n\n\n\n<li>Here is the code of the <strong>db-config.php<\/strong> file. Simply paste it in your file and replace the database credentials like <strong>password<\/strong> and the <strong>database name<\/strong>.<\/li>\n<\/ul>\n\n\n\n<pre title=\"db-config.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n    class DBController {\n        private $hostname       =       \"localhost\";\n        private $username       =       \"root\";\n        private $password       =       \"root\";\n        private $db             =       \"ajax_file_upload\";\n\n        \/\/ ----------- [ Creating connection ] ---------------\n\n        public function connect() {\n            $conn               =       new mysqli($this-&gt;hostname, $this-&gt;username, $this-&gt;password, $this-&gt;db)or die(\"Database connection error.\" . $conn-&gt;connect_error);\n                                        \n            return $conn;           \n        }\n\n        \/\/ ---------- [ Closing connection ] -----------------\n\n        public function close($conn) {\n            $conn-&gt;close();\n        }\n    }\n?&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_File_Upload_PHP_Form_UI\"><\/span>Create File Upload PHP Form (UI)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now, create a new file <strong>(index.php) <\/strong>and paste the below code there. I have used the CDN for the <strong>Bootstrap CSS <\/strong>and <strong>JavaScript<\/strong>.<\/p>\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  &lt;head&gt;\n    &lt;title&gt; PHP File Upload Using Ajax And jQuery&lt;\/title&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"&gt;\n    &lt;link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.min.css\"&gt;   \n    &lt;\/head&gt;\n  &lt;body&gt;\n      &lt;div class=\"container mt-5\"&gt;\n      \t&lt;h4 class=\"text-center\"&gt; File Upload in PHP Using jQuery and Ajax &lt;\/h4&gt;\n          &lt;form method=\"post\" id=\"myForm\" autocomplete=\"off\" enctype=\"multipart\/form-data\"&gt;\n            &lt;div class=\"row\"&gt;\n                &lt;div class=\"col-xl-6 col-lg-6 col-md-10 col-sm-12 col-12 m-auto shadow p-4\"&gt;\n                    &lt;label for=\"file\"&gt;Image &lt;\/label&gt;    \n                        &lt;div class=\"form-group\"&gt;\n                            &lt;input type=\"file\" name=\"file\" id=\"file\" class=\"form-control\"&gt;\n                        &lt;\/div&gt;\n\n                        &lt;div class=\"form-group\"&gt;\n                            &lt;button type=\"button\" id=\"uploadBtn\" class=\"btn btn-success\"&gt; Upload &lt;\/button&gt;\n                        &lt;\/div&gt;   \n                        \n                        &lt;div class=\"form-group\"&gt;\n                            &lt;div id=\"result\"&gt;&lt;\/div&gt; \n                   \t\t&lt;\/div&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/form&gt;\n      &lt;\/div&gt;     \n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js\"&gt;&lt;\/script&gt;\n&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.12.3\/umd\/popper.min.js\"\n        integrity=\"sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh\" crossorigin=\"anonymous\"&gt;\n&lt;\/script&gt;\n&lt;script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta.2\/js\/bootstrap.min.js\"\n        integrity=\"sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ\" crossorigin=\"anonymous\"&gt;\n&lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Start the Apache and MySQL services in the XAMPP Control Panel.<\/li>\n\n\n\n<li>Run the project. It will look like this.<\/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=\"686\" height=\"317\" src=\"https:\/\/i0.wp.com\/www.programmingfields.com\/wp-content\/uploads\/2019\/08\/PHP-File-Upload-Using-Ajax-And-jQuery.png?resize=686%2C317&#038;ssl=1\" alt=\"ajax file upload php\" class=\"wp-image-410\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/PHP-File-Upload-Using-Ajax-And-jQuery.png?w=686&amp;ssl=1 686w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/PHP-File-Upload-Using-Ajax-And-jQuery.png?resize=300%2C139&amp;ssl=1 300w\" sizes=\"auto, (max-width: 686px) 100vw, 686px\" \/><figcaption class=\"wp-element-caption\"><strong>Ajax File Upload PHP<\/strong><\/figcaption><\/figure>\n<\/div>\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 Data From MySQL Database in PHP Using jQuery and Ajax (opens in a new tab)\">Load Data From MySQL Database in PHP Using jQuery and Ajax<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Send_Ajax_Request_For_PHP_File_Upload\"><\/span>Send Ajax Request For PHP File Upload<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now, I will create an Ajax request using jQuery to the PHP.  Paste the below code in the<strong> index.php<\/strong> file at the bottom, after the jQuery CDN.<\/p>\n\n\n\n<pre title=\"Ajax Script For File Upload\" class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">&lt;script&gt;\n$(document).ready(function(){\n    $(\"#uploadBtn\").click(function(){\n        var formData = new FormData(this.form);\n       \n        $.ajax({\n            url: '.\/upload.php',\n            type: 'POST',\n            data: formData,\n            contentType: false,       \n            cache: false,             \n            processData:false, \n\n            success:function(response) {\n                    $(\"#result\").html(response);                    \n            }\n        });      \n    });\n});     \n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the above code, I have created the button click event in jQuery so that when the upload button will click, it will fire the event.<\/li>\n\n\n\n<li>Then, I have created an object of <strong>FormData() <\/strong>class and passed the current form. Rather than <strong>this.form<\/strong>, you can also pass the form id.<\/li>\n\n\n\n<li>In the ajax request, I am sending the form data to a URL (PHP file) named <strong>upload.php<\/strong>. So, let&#8217;s create a new file to handle the ajax request.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Ajax_Request_Handling_For_File_Upload_in_PHP_MySQL_Database\"><\/span>Ajax Request Handling For File Upload in PHP MySQL Database<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Create a new file (<strong>upload.php<\/strong>) and paste the below code.<\/p>\n\n\n\n<pre title=\"upload.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\ninclude_once '.\/db-config.php';\ninclude_once '.\/file-controller.php';\n  \nif(isset($_POST)) {\n    $db             =           new DBController();\n    $conn           =           $db-&gt;connect();\n\n    if(!empty($_FILES['file'])) {\n            $fController         =       new FileController($conn);\n            $uploadResult        =       $fController-&gt;uploadFile($_FILES['file']);\n\n            if($uploadResult['status'] == \"SUCCESS\") {\n                echo \"&lt;div class='alert alert-success alert-dismissible'&gt;\" .$uploadResult['message'] . \"&lt;\/div&gt;\";\n\n                echo '&lt;img src=\".\/uploads\/'.$uploadResult['image'].'\" style=\"max-width: 540px;\"&gt;';\n            }\n\n            elseif($uploadResult['status'] == \"FAILED\") {\n                echo \"&lt;div class='alert alert-danger alert-dismissible'&gt;\" .$uploadResult['message'] . \"&lt;\/div&gt;\";\n            }\n\n            else {\n                echo \"&lt;div class='alert alert-success alert-dismissible'&gt;\" .$uploadResult['message'] . \"&lt;\/div&gt;\";\n            }\n    }        \n}\n?&gt;<\/code><\/pre>\n\n\n\n<p>Here, at the top (line no. 3-4), I have included two PHP files-<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>db-config.php<\/strong> and <\/li>\n\n\n\n<li><strong>file-controller.php<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the <strong>db-config.php<\/strong> file, I have created the database connection using OOPs, which, I&#8217;ve shown you above.<\/li>\n\n\n\n<li>The <strong>file-controller.php<\/strong> will contain the function to upload the file and also, It will store the file name into the database table.<\/li>\n\n\n\n<li>Then, I have checked if the request is <strong>POST <\/strong>type, then I have created the object of the <strong>DBController<\/strong> class which is in the <strong>db-config.php<\/strong> file.<\/li>\n\n\n\n<li>In, the next line (line no. 8), I have called the <strong>connect() <\/strong>function for establishing the connection in this file.<\/li>\n\n\n\n<li>Next, I have created a condition, If the file is not empty then it will move to the next step. So, I have created the object of the <strong>FileController<\/strong> class which is inside the <strong>file-controller.php<\/strong> file.<\/li>\n\n\n\n<li>So, now you&#8217;ll require to create a new file (<strong>file-controller.php<\/strong>). This file will contain the file upload functionalities.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"File_Upload_in_PHP_MySQL_Database\"><\/span>File Upload in PHP MySQL Database<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Now, create a new file with the name <strong>file-controller.php<\/strong> and paste the below code there.<\/li>\n<\/ul>\n\n\n\n<pre title=\"file-controller.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\n    class FileController {\n        \n        \/\/ --------------- [ Constructor ] --------------------------\n        public function __construct($conn) {\n             $this-&gt;conn = $conn;        \n        }\n\n        \/\/ --------------- [ Upload Function ] -----------------------\n        public function uploadFile($file) {\n            $source_path                =           $file['tmp_name'];\n\n            $file_name                  =           $file['name'];\n            \n            $file_extension             =           pathinfo($file_name, PATHINFO_EXTENSION);\n\n            $target_file_name           =           time().\"-\".time().\".\".$file_extension;\n\n            $target_directory           =           \".\/uploads\/\".$target_file_name;\n\n            $file_type                  =           $file['type'];\n\n            $data                       =           array();\n\n            \/\/ ------------ [ File Validation ] --------------------------           \n\n            if($file_type != \"image\/gif\" &amp;&amp; $file_type != \"image\/jpg\" &amp;&amp; $file_type != \"image\/png\" &amp;&amp; $file_type != \"image\/jpeg\" &amp;&amp; $file_type !=\"image\/png\") {\n                $data['status']         =           \"FAILED\";\n                $data['message']        =           \"Invalid file type. (File type only jpg, jpeg, gif, and png allowed)\";\n                return $data;\n            }\n\n            if($file['size']  &gt; 2048000) {\n                $data['status']         =           \"FAILED\";\n                $data['message']        =           \"File size is larger than 2 MB\";\n                return $data;\n            }\n\n            \/\/ ------------------ [ File upload ] ---------------\n\n            if(move_uploaded_file($source_path, $target_directory)) {\n\n                \/\/ ---------------[ Insert into database ] -----------------\n                $sql            =           \"INSERT INTO image (img) VALUES ('\".$target_file_name.\"')\";\n                $result         =           $this-&gt;conn-&gt;query($sql);\n                \n                if($result) {\n                    $data['status']     =           \"SUCCESS\";\n                    $data['message']    =           \"File uploaded successfully.\";\n                    $data['image']      =           $target_file_name;\n                }\n            }\n            return $data;\n        }\n    }\n?&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a new folder (<strong>uploads<\/strong>) in the same directory, in which the file will move during the file upload.  (You can create the folder in another directory too, but in that case, you will have to put the full path of that folder in the target directory.)<\/li>\n\n\n\n<li>Before uploading any file, I have got the extension of the file by using the <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/www.php.net\/manual\/en\/function.pathinfo.php\" target=\"_blank\">pathinfo()<\/a><strong> <\/strong>function.<\/li>\n\n\n\n<li>This function takes the file name as the parameter and will return the file extension. <\/li>\n<\/ul>\n\n\n\n<p>Example &#8211;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">pathinfo($file_name, PATHINFO_EXTENSION)<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>I have used some sort of file validation before uploading. The file <strong>type <\/strong>and <strong>size <\/strong>is the default attribute of the file. <\/li>\n\n\n\n<li>So by using these attributes, I have validated the file type and the size.<\/li>\n\n\n\n<li>Once, the validation will be passed, the file will be uploaded into the specified folder (location).<\/li>\n\n\n\n<li>In the next step, you will have to insert the file name into the database table.<\/li>\n\n\n\n<li>Once the file name has been inserted into the database table, the function will return the result with <strong>status<\/strong>, <strong>message <\/strong>and <strong>filename<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Run_the_PHP_File_Upload_Project\"><\/span>Run the PHP File Upload Project<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Save and execute the project. <\/li>\n\n\n\n<li>Choose the file and click on the<strong> Upload <\/strong>button.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.programmingfields.com\/wp-content\/uploads\/2019\/08\/3.-PHP-File-Upload-Using-Ajax-And-jQuery.png?h=298\" alt=\"PHP file upload\" class=\"wp-image-446\" \/><figcaption class=\"wp-element-caption\"><strong>Browse File<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p>Once the file upload will complete, it will return the success message with the uploaded file as shown below. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"632\" height=\"601\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/2.-PHP-File-Upload-Using-Ajax-And-jQuery.png?resize=632%2C601&#038;ssl=1\" alt=\"PHP Ajax file upload\" class=\"wp-image-445\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/2.-PHP-File-Upload-Using-Ajax-And-jQuery.png?w=632&amp;ssl=1 632w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/2.-PHP-File-Upload-Using-Ajax-And-jQuery.png?resize=300%2C285&amp;ssl=1 300w\" sizes=\"auto, (max-width: 632px) 100vw, 632px\" \/><figcaption class=\"wp-element-caption\"><strong>File Upload with Success Result<\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>In the above result, you can see the file has uploaded in the uploads folder.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"681\" height=\"461\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/file-upload.png?resize=681%2C461&#038;ssl=1\" alt=\"upload photo php\" class=\"wp-image-451\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/file-upload.png?w=681&amp;ssl=1 681w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/file-upload.png?resize=300%2C203&amp;ssl=1 300w\" sizes=\"auto, (max-width: 681px) 100vw, 681px\" \/><figcaption class=\"wp-element-caption\">Uploaded File in the uploads directory<\/figcaption><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>If you select any other file type which is not specified in the condition then it will show the error as shown 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=\"627\" height=\"370\" src=\"https:\/\/i0.wp.com\/www.programmingfields.com\/wp-content\/uploads\/2019\/08\/PHP-file-validation-error.png?resize=627%2C370\" alt=\"PHP file validation error\" class=\"wp-image-449\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/PHP-file-validation-error.png?w=627&amp;ssl=1 627w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/PHP-file-validation-error.png?resize=300%2C177&amp;ssl=1 300w\" sizes=\"auto, (max-width: 627px) 100vw, 627px\" \/><figcaption class=\"wp-element-caption\">PHP File Validation Error<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Here, is the demo of the file uploading tutorial.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"766\" height=\"617\" src=\"https:\/\/i0.wp.com\/www.programmingfields.com\/wp-content\/uploads\/2019\/08\/PHP-File-upload.gif?resize=766%2C617\" alt=\"PHP File upload Result\" class=\"wp-image-450\"\/><figcaption class=\"wp-element-caption\">PHP File Upload Demo<\/figcaption><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/www.programmingfields.com\/jquery-file-upload-in-php\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Drag and Drop Multiple File Upload in PHP Using Dropzone js (opens in a new tab)\">Drag and Drop Multiple File Upload in PHP Using Dropzone js<\/a><\/p>\n\n\n\n<p>You can download the PHP File upload script from the below download button.<\/p>\n\n\n\n<div class=\"wp-block-button aligncenter\"><a class=\"wp-block-button__link has-text-color has-background wp-element-button\" href=\"http:\/\/www.programmingfields.com\/wp-content\/uploads\/2019\/08\/file-upload.zip\" style=\"color:#ffffff;background-color:#09546b\">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>Finally, we have completed the File Upload in the PHP MySQL database using jQuery and Ajax. This post will help you in the Ajax file upload in PHP without refreshing the form. I hope, it will be interesting for you. So, keep practicing and enjoy coding. Thank you \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When we upload the files in PHP it means we move the files from one location to another. Generally, if we talk about the PHP file upload, then we know that in every request of the client to the server, the server returns the response with the required data. So, in case of PHP file [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":457,"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":[12,13,4],"tags":[305,9,306,304,303],"yst_prominent_words":[300,1203,281,22,293,263,290,288,280,16,295,23,26,135,262,292,259,299,291,289],"class_list":{"0":"post-398","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-ajax-tutorial","8":"category-jquery","9":"category-php","10":"tag-ajax-file-upload-php","11":"tag-ajax-php-form-handling","12":"tag-file-upload-in-php-mysql","13":"tag-php-file-upload-script","14":"tag-upload-photo-php","15":"entry"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2019\/08\/File-Upload-in-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\/398","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=398"}],"version-history":[{"count":2,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/398\/revisions"}],"predecessor-version":[{"id":8973,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/398\/revisions\/8973"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media\/457"}],"wp:attachment":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media?parent=398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/categories?post=398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/tags?post=398"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/yst_prominent_words?post=398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}