{"id":2991,"date":"2017-12-07T18:51:43","date_gmt":"2017-12-07T18:51:43","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=2991"},"modified":"2022-07-20T06:05:27","modified_gmt":"2022-07-20T06:05:27","slug":"ajax-file-upload-with-form-data-jquery-php-mysql","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/ajax-file-upload-with-form-data-jquery-php-mysql\/","title":{"rendered":"Ajax File Upload with Form Data using PHP"},"content":{"rendered":"<p>File upload functionality is a common feature of the dynamic web application. Generally, a form is submitted and the page is refreshed to <a href=\"https:\/\/www.codexworld.com\/php-file-upload\/\">upload file in PHP<\/a>. But if you want to provide a better user interface, jQuery and Ajax can be used to <a href=\"https:\/\/www.codexworld.com\/ajax-file-upload-using-jquery-php\/\">upload file without page refresh<\/a>. In the earlier tutorial, we discussed an easy way to upload files using jQuery and Ajax in PHP. In this tutorial, we will show you the simplest way to upload files or images with form data using jQuery, Ajax, and PHP.<\/p>\n<p>The FormData object compiles a set of key\/value pairs to send using XMLHttpRequest. Basically, FormData is used to send the form data via Ajax request same as submit() method. The files can also be sent using FormData by including a file <span style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span>&gt;<\/span> element in the HTML <span style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">form<\/span>&gt;<\/span>.<\/p>\n<p>This example code will show you how to submit form data and upload file using FormData object and PHP. The following functionality will be implemented in the sample <b>Ajax file upload script<\/b>.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Submit file with other form data via jQuery Ajax.<\/li>\n<li>Upload file to the server and insert form data into the database using PHP and MySQL.<\/li>\n<\/ul>\n<h2>Create Database Table<\/h2>\n<p>A table is required to store the form input field&#8217;s data and file info in the database. The following SQL creates a <code>form_data<\/code> table with some basic fields in the MySQL database.<\/p>\n<pre style=\"color: rgb(0, 0, 0);\"><span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">CREATE<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">TABLE<\/span> <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`form_data`<\/span> (\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`id`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">int<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">11<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span> AUTO_INCREMENT,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`name`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">50<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span> utf8_unicode_ci <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`email`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">50<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span> utf8_unicode_ci <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`file_name`<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(0, 134, 179);\">varchar<\/span>(<span class=\"hljs-number\" style=\"color: rgb(64, 160, 112);\">255<\/span>) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span> utf8_unicode_ci <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span>,\r\n  <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`submitted_on`<\/span> datetime <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">NOT<\/span> <span class=\"hljs-literal\" style=\"color: rgb(149, 65, 33);\">NULL<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">DEFAULT<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">current_timestamp<\/span>(),\r\n  PRIMARY <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">KEY<\/span> (<span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">`id`<\/span>)\r\n) <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">ENGINE<\/span>=<span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">InnoDB<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">DEFAULT<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">CHARSET<\/span>=utf8 <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COLLATE<\/span>=utf8_unicode_ci;<\/pre>\n<h2>Database Configuration (dbConfig.php)<\/h2>\n<p>The <code>dbConfig.php<\/code> file is used to connect and select the database using PHP and MySQL. Specify the database host (<code>$dbHost<\/code>), username (<code>$dbUsername<\/code>), password (<code>$dbPassword<\/code>), and name (<code>$dbName<\/code>) as per your database credentials.<\/p>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Database&nbsp;configuration <br \/><\/span><span style=\"color: #0000BB\">$dbHost&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"localhost\"<\/span><span style=\"color: #007700\">; <br \/><\/span><span style=\"color: #0000BB\">$dbUsername&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"root\"<\/span><span style=\"color: #007700\">; <br \/><\/span><span style=\"color: #0000BB\">$dbPassword&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"root\"<\/span><span style=\"color: #007700\">; <br \/><\/span><span style=\"color: #0000BB\">$dbName&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"codexworld\"<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Create&nbsp;database&nbsp;connection <br \/><\/span><span style=\"color: #0000BB\">$db&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;new&nbsp;<\/span><span style=\"color: #0000BB\">mysqli<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$dbHost<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$dbUsername<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$dbPassword<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$dbName<\/span><span style=\"color: #007700\">); <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Check&nbsp;connection <br \/><\/span><span style=\"color: #007700\">if&nbsp;(<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">connect_error<\/span><span style=\"color: #007700\">)&nbsp;{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;die(<\/span><span style=\"color: #DD0000\">\"Connection&nbsp;failed:&nbsp;\"&nbsp;<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">connect_error<\/span><span style=\"color: #007700\">); <br \/>}<\/span><\/pre>\n<h2>File Upload Form with Ajax Request (index.html)<\/h2>\n<p><b>HTML Code:<\/b><br \/>\nInitially, an HTML form is displayed with a file input field. The user can provide their name and email, and select a file to upload.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Define an element (statusMsg) to display form submission status.<\/li>\n<\/ul>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- Status message --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"statusMsg\"<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- File upload form --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"col-lg-12\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">form<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"fupForm\"<\/span> <span class=\"hljs-attr\">enctype<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"multipart\/form-data\"<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-group\"<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"name\"<\/span>&gt;<\/span>Name:<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"text\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-control\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"name\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"Enter name\"<\/span> <span class=\"hljs-attr\">required<\/span> \/&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-group\"<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"email\"<\/span>&gt;<\/span>Email:<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"email\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-control\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"email\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"Enter email\"<\/span> <span class=\"hljs-attr\">required<\/span> \/&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-group\"<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"file\"<\/span>&gt;<\/span>File:<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"file\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-control\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"file\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"file\"<\/span> <span class=\"hljs-attr\">required<\/span> \/&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n        \r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"submit\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"submit\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"btn btn-primary submitBtn\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"SUBMIT\"<\/span>\/&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">form<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span><\/pre>\n<p><b>JavaScript Code:<\/b><br \/>\nThe Ajax is used to submit form and file data, so, include the jQuery library first.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p>Once the submit button is clicked, the Ajax request is initiated using jQuery.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>The FormData object is used to submit form and file data using Ajax. <\/li>\n<li>The form data is sent to the server-side script (<code>submit.php<\/code>) via Ajax to process upload and data submission.<\/li>\n<li>Based on the response, the status is shown on the web page.<\/li>\n<\/ul>\n<pre style=\"color: rgb(110, 107, 94);\">$(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>).ready(<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">e<\/span>)<\/span>{\r\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Submit form data via Ajax<\/span>\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"#fupForm\"<\/span>).on(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'submit'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">e<\/span>)<\/span>{\r\n        e.preventDefault();\r\n        $.ajax({\r\n            type: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'POST'<\/span>,\r\n            url: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'submit.php'<\/span>,\r\n            data: <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> FormData(<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">this<\/span>),\r\n            dataType: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'json'<\/span>,\r\n            contentType: <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>,\r\n            cache: <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>,\r\n            processData:<span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>,\r\n            beforeSend: <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>)<\/span>{\r\n                $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'.submitBtn'<\/span>).attr(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"disabled\"<\/span>,<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"disabled\"<\/span>);\r\n                $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#fupForm'<\/span>).css(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"opacity\"<\/span>,<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\".5\"<\/span>);\r\n            },\r\n            success: <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">response<\/span>)<\/span>{\r\n                $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'.statusMsg'<\/span>).html(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">''<\/span>);\r\n                <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span>(response.status == <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">1<\/span>){\r\n                    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#fupForm'<\/span>)[<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>].reset();\r\n                    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'.statusMsg'<\/span>).html(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;p class=\"alert alert-success\"&gt;'<\/span>+response.message+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;\/p&gt;'<\/span>);\r\n                }<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">else<\/span>{\r\n                    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'.statusMsg'<\/span>).html(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;p class=\"alert alert-danger\"&gt;'<\/span>+response.message+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;\/p&gt;'<\/span>);\r\n                }\r\n                $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#fupForm'<\/span>).css(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"opacity\"<\/span>,<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"\"<\/span>);\r\n                $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\".submitBtn\"<\/span>).removeAttr(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"disabled\"<\/span>);\r\n            }\r\n        });\r\n    });\r\n});<\/pre>\n<p>Validate file type and restrict the user to upload only certain types of file (PDF, MS Word, Image, etc).<\/p>\n<ul class=\"bullet_disk_list\">\n<li>On selecting the file, the type is validated using jQuery.<\/li>\n<li>Get the type of the selected file using JavaScript File API (<code>this.files<\/code>).<\/li>\n<li>If the file type is not matched with the allowed types, show the alert message.<\/li>\n<\/ul>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ File type validation<\/span>\r\n$(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"#file\"<\/span>).change(<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> file = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">this<\/span>.files[<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>];\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> fileType = file.type;\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> match = [<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'application\/pdf'<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'application\/msword'<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'application\/vnd.ms-office'<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'image\/jpeg'<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'image\/png'<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'image\/jpg'<\/span>];\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span>(!((fileType == match[<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>]) || (fileType == match[<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">1<\/span>]) || (fileType == match[<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">2<\/span>]) || (fileType == match[<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">3<\/span>]) || (fileType == match[<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">4<\/span>]) || (fileType == match[<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">5<\/span>]))){\r\n        alert(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Sorry, only PDF, DOC, JPG, JPEG, &amp; PNG files are allowed to upload.'<\/span>);\r\n        $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"#file\"<\/span>).val(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">''<\/span>);\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">return<\/span> <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>;\r\n    }\r\n});<\/pre>\n<h2>Upload File and Insert Form Data (submit.php)<\/h2>\n<p>This file is loaded by the Ajax request to perform the following operations.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Retrieve the form data using <b>$_POST in PHP<\/b>.<\/li>\n<li>Validate form data to check whether the mandatory fields are empty.<\/li>\n<li>Validate email address using <b>FILTER_VALIDATE_EMAIL in PHP<\/b>.<\/li>\n<li>Check the file extension to allow certain file formats (PDF, MS Word, and Image) to upload.<\/li>\n<li>Upload file to the server using <b>PHP move_uploaded_file()<\/b> function.<\/li>\n<li>Insert form data and file name in the database.<\/li>\n<li>Return response to the Ajax request.<\/li>\n<\/ul>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;File&nbsp;upload&nbsp;folder <br \/><\/span><span style=\"color: #0000BB\">$uploadDir&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">'uploads\/'<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Allowed&nbsp;file&nbsp;types <br \/><\/span><span style=\"color: #0000BB\">$allowTypes&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array(<\/span><span style=\"color: #DD0000\">'pdf'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'doc'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'docx'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'jpg'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'png'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'jpeg'<\/span><span style=\"color: #007700\">); <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Default&nbsp;response <br \/><\/span><span style=\"color: #0000BB\">$response&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array( <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'status'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'message'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'Form&nbsp;submission&nbsp;failed,&nbsp;please&nbsp;try&nbsp;again.' <br \/><\/span><span style=\"color: #007700\">); <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;If&nbsp;form&nbsp;is&nbsp;submitted <br \/><\/span><span style=\"color: #007700\">if(isset(<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'name'<\/span><span style=\"color: #007700\">])&nbsp;||&nbsp;isset(<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'email'<\/span><span style=\"color: #007700\">])&nbsp;||&nbsp;isset(<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'file'<\/span><span style=\"color: #007700\">])){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Get&nbsp;the&nbsp;submitted&nbsp;form&nbsp;data <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$name&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'name'<\/span><span style=\"color: #007700\">]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$email&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'email'<\/span><span style=\"color: #007700\">]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Check&nbsp;whether&nbsp;submitted&nbsp;data&nbsp;is&nbsp;not&nbsp;empty <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">if(!empty(<\/span><span style=\"color: #0000BB\">$name<\/span><span style=\"color: #007700\">)&nbsp;&amp;&amp;&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$email<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Validate&nbsp;email <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">if(<\/span><span style=\"color: #0000BB\">filter_var<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$email<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">FILTER_VALIDATE_EMAIL<\/span><span style=\"color: #007700\">)&nbsp;===&nbsp;<\/span><span style=\"color: #0000BB\">false<\/span><span style=\"color: #007700\">){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'message'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #DD0000\">'Please&nbsp;enter&nbsp;a&nbsp;valid&nbsp;email.'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$uploadStatus&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Upload&nbsp;file <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$uploadedFile&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(!empty(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">\"file\"<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">\"name\"<\/span><span style=\"color: #007700\">])){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;File&nbsp;path&nbsp;config <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$fileName&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">basename<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">\"file\"<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">\"name\"<\/span><span style=\"color: #007700\">]); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$targetFilePath&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$uploadDir&nbsp;<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$fileName<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$fileType&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">pathinfo<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$targetFilePath<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">PATHINFO_EXTENSION<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Allow&nbsp;certain&nbsp;file&nbsp;formats&nbsp;to&nbsp;upload <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">if(<\/span><span style=\"color: #0000BB\">in_array<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$fileType<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$allowTypes<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Upload&nbsp;file&nbsp;to&nbsp;the&nbsp;server <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">if(<\/span><span style=\"color: #0000BB\">move_uploaded_file<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">\"file\"<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">\"tmp_name\"<\/span><span style=\"color: #007700\">],&nbsp;<\/span><span style=\"color: #0000BB\">$targetFilePath<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$uploadedFile&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$fileName<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$uploadStatus&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'message'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #DD0000\">'Sorry,&nbsp;there&nbsp;was&nbsp;an&nbsp;error&nbsp;uploading&nbsp;your&nbsp;file.'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$uploadStatus&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'message'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #DD0000\">'Sorry,&nbsp;only&nbsp;'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">implode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'\/'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$allowTypes<\/span><span style=\"color: #007700\">).<\/span><span style=\"color: #DD0000\">'&nbsp;files&nbsp;are&nbsp;allowed&nbsp;to&nbsp;upload.'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">$uploadStatus&nbsp;<\/span><span style=\"color: #007700\">==&nbsp;<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Include&nbsp;the&nbsp;database&nbsp;config&nbsp;file <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">include_once&nbsp;<\/span><span style=\"color: #DD0000\">'dbConfig.php'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Insert&nbsp;form&nbsp;data&nbsp;in&nbsp;the&nbsp;database <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$sqlQ&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"INSERT&nbsp;INTO&nbsp;form_data&nbsp;(name,email,file_name,submitted_on)&nbsp;VALUES&nbsp;(?,?,?,NOW())\"<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$stmt&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">prepare<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$sqlQ<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$stmt<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">bind_param<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"sss\"<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$name<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$email<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$uploadedFile<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$insert&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$stmt<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">execute<\/span><span style=\"color: #007700\">(); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">$insert<\/span><span style=\"color: #007700\">){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'status'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'message'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #DD0000\">'Form&nbsp;data&nbsp;submitted&nbsp;successfully!'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'message'<\/span><span style=\"color: #007700\">]&nbsp;=&nbsp;<\/span><span style=\"color: #DD0000\">'Please&nbsp;fill&nbsp;all&nbsp;the&nbsp;mandatory&nbsp;fields&nbsp;(name&nbsp;and&nbsp;email).'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>} <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Return&nbsp;response <br \/><\/span><span style=\"color: #007700\">echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">);<\/span><\/pre>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/live-image-upload-jquery-php-mysql\/\">Live Image Upload using jQuery, PHP and MySQL<\/a><\/span><\/p>\n<h2>Conclusion<\/h2>\n<p>We\u2019ve tried to make the image file upload process simpler and more user-friendly with jQuery and Ajax. You can upload any type of file including image and PDF with the form data without page refresh using jQuery, Ajax, PHP, and MySQL. Use our example code to <b>upload image without page reload<\/b> using Ajax and PHP. Also, the functionality of the sample Ajax file upload script can be enhanced easily as per your needs.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>File upload functionality is a common feature of the dynamic web application. Generally, a form is submitted and the page is refreshed to upload file in PHP. But if you want to provide a better <\/p>\n","protected":false},"author":1,"featured_media":5014,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[7],"tags":[28,56,225,16,19,14,67],"class_list":["post-2991","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ajax","tag-ajax","tag-file-upload","tag-form","tag-jquery","tag-mysql","tag-php","tag-upload","cat-7-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Ajax File Upload with Form Data using PHP - CodexWorld<\/title>\n<meta name=\"description\" content=\"Ajax file upload with form data - Upload image file without page refresh using Ajax and PHP. Example code to upload file and store form data in the database using jQuery, Ajax, PHP, and MySQL.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/ajax-file-upload-with-form-data-jquery-php-mysql\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ajax File Upload with Form Data using PHP - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Ajax file upload with form data - Upload image file without page refresh using Ajax and PHP. Example code to upload file and store form data in the database using jQuery, Ajax, PHP, and MySQL.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/ajax-file-upload-with-form-data-jquery-php-mysql\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-07T18:51:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-20T06:05:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/12\/ajax-file-upload-with-form-data-using-jquery-php-mysql-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ajax-file-upload-with-form-data-jquery-php-mysql\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ajax-file-upload-with-form-data-jquery-php-mysql\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Ajax File Upload with Form Data using PHP\",\"datePublished\":\"2017-12-07T18:51:43+00:00\",\"dateModified\":\"2022-07-20T06:05:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ajax-file-upload-with-form-data-jquery-php-mysql\\\/\"},\"wordCount\":619,\"commentCount\":14,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ajax-file-upload-with-form-data-jquery-php-mysql\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/12\\\/ajax-file-upload-with-form-data-using-jquery-php-mysql-codexworld.png\",\"keywords\":[\"Ajax\",\"File Upload\",\"Form\",\"jQuery\",\"MySQL\",\"PHP\",\"Upload\"],\"articleSection\":[\"Ajax\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/ajax-file-upload-with-form-data-jquery-php-mysql\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ajax-file-upload-with-form-data-jquery-php-mysql\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/ajax-file-upload-with-form-data-jquery-php-mysql\\\/\",\"name\":\"Ajax File Upload with Form Data using PHP - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ajax-file-upload-with-form-data-jquery-php-mysql\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ajax-file-upload-with-form-data-jquery-php-mysql\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/12\\\/ajax-file-upload-with-form-data-using-jquery-php-mysql-codexworld.png\",\"datePublished\":\"2017-12-07T18:51:43+00:00\",\"dateModified\":\"2022-07-20T06:05:27+00:00\",\"description\":\"Ajax file upload with form data - Upload image file without page refresh using Ajax and PHP. Example code to upload file and store form data in the database using jQuery, Ajax, PHP, and MySQL.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ajax-file-upload-with-form-data-jquery-php-mysql\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/ajax-file-upload-with-form-data-jquery-php-mysql\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ajax-file-upload-with-form-data-jquery-php-mysql\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/12\\\/ajax-file-upload-with-form-data-using-jquery-php-mysql-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/12\\\/ajax-file-upload-with-form-data-using-jquery-php-mysql-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"ajax-file-upload-with-form-data-using-jquery-php-mysql-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ajax-file-upload-with-form-data-jquery-php-mysql\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ajax File Upload with Form Data using PHP\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ajax File Upload with Form Data using PHP - CodexWorld","description":"Ajax file upload with form data - Upload image file without page refresh using Ajax and PHP. Example code to upload file and store form data in the database using jQuery, Ajax, PHP, and MySQL.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/ajax-file-upload-with-form-data-jquery-php-mysql\/","og_locale":"en_US","og_type":"article","og_title":"Ajax File Upload with Form Data using PHP - CodexWorld","og_description":"Ajax file upload with form data - Upload image file without page refresh using Ajax and PHP. Example code to upload file and store form data in the database using jQuery, Ajax, PHP, and MySQL.","og_url":"https:\/\/www.codexworld.com\/ajax-file-upload-with-form-data-jquery-php-mysql\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2017-12-07T18:51:43+00:00","article_modified_time":"2022-07-20T06:05:27+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/12\/ajax-file-upload-with-form-data-using-jquery-php-mysql-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/ajax-file-upload-with-form-data-jquery-php-mysql\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/ajax-file-upload-with-form-data-jquery-php-mysql\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Ajax File Upload with Form Data using PHP","datePublished":"2017-12-07T18:51:43+00:00","dateModified":"2022-07-20T06:05:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/ajax-file-upload-with-form-data-jquery-php-mysql\/"},"wordCount":619,"commentCount":14,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/ajax-file-upload-with-form-data-jquery-php-mysql\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/12\/ajax-file-upload-with-form-data-using-jquery-php-mysql-codexworld.png","keywords":["Ajax","File Upload","Form","jQuery","MySQL","PHP","Upload"],"articleSection":["Ajax"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/ajax-file-upload-with-form-data-jquery-php-mysql\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/ajax-file-upload-with-form-data-jquery-php-mysql\/","url":"https:\/\/www.codexworld.com\/ajax-file-upload-with-form-data-jquery-php-mysql\/","name":"Ajax File Upload with Form Data using PHP - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/ajax-file-upload-with-form-data-jquery-php-mysql\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/ajax-file-upload-with-form-data-jquery-php-mysql\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/12\/ajax-file-upload-with-form-data-using-jquery-php-mysql-codexworld.png","datePublished":"2017-12-07T18:51:43+00:00","dateModified":"2022-07-20T06:05:27+00:00","description":"Ajax file upload with form data - Upload image file without page refresh using Ajax and PHP. Example code to upload file and store form data in the database using jQuery, Ajax, PHP, and MySQL.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/ajax-file-upload-with-form-data-jquery-php-mysql\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/ajax-file-upload-with-form-data-jquery-php-mysql\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/ajax-file-upload-with-form-data-jquery-php-mysql\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/12\/ajax-file-upload-with-form-data-using-jquery-php-mysql-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/12\/ajax-file-upload-with-form-data-using-jquery-php-mysql-codexworld.png","width":1366,"height":768,"caption":"ajax-file-upload-with-form-data-using-jquery-php-mysql-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/ajax-file-upload-with-form-data-jquery-php-mysql\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Ajax File Upload with Form Data using PHP"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/12\/ajax-file-upload-with-form-data-using-jquery-php-mysql-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-Mf","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2991","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=2991"}],"version-history":[{"count":8,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2991\/revisions"}],"predecessor-version":[{"id":4122,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2991\/revisions\/4122"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/5014"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=2991"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=2991"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=2991"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}