{"id":4452,"date":"2020-07-01T06:38:16","date_gmt":"2020-07-01T06:38:16","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=4452"},"modified":"2020-07-01T06:38:16","modified_gmt":"2020-07-01T06:38:16","slug":"upload-multiple-files-with-form-data-using-jquery-ajax-php","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/upload-multiple-files-with-form-data-using-jquery-ajax-php\/","title":{"rendered":"Upload Multiple Files with Form Data using jQuery, Ajax, and PHP"},"content":{"rendered":"<p><a href=\"https:\/\/www.codexworld.com\/ajax-file-upload-with-form-data-jquery-php-mysql\/\">File upload with form data<\/a> functionality is very useful for the web form. If you want to allow the user to send an attachment with the web form, file upload functionality needs to be integrated. The form submission and file upload functionality can be implemented easily with PHP. Alternatively, you can build webform with file upload functionality without page refresh using jQuery and Ajax.<\/p>\n<p><b>JavaScript FormData<\/b> interface provides an easy way to send form fields and their values to the server-side via Ajax. With the FormData object, the web form submission and file upload functionality can be implemented without page refresh. In this tutorial, we will show you how to <b>upload multiple files with form data<\/b> using jQuery, Ajax, and PHP.<\/p>\n<p>The following functionality will be implemented in the example <b>Ajax Form with Attachment script<\/b>.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Build a web form with multiple images\/files attachment.<\/li>\n<li>Submit the form field&#8217;s data without page refresh via Ajax.<\/li>\n<li>Upload multiple files to the server.<\/li>\n<li>Insert form data in the database.<\/li>\n<\/ul>\n<h2>Create Database Table<\/h2>\n<p>To store the form data and files info, a table is required 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_names`<\/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> <span class=\"hljs-keyword\" style=\"color: rgb(149, 65, 33);\">COMMENT<\/span> <span class=\"hljs-string\" style=\"color: rgb(33, 145, 97);\">'File names in a comma-separated string'<\/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>Web Form with Multiple Files Attachment (index.html)<\/h2>\n<p><b>HTML Code:<\/b><br \/>\nInitially, an HTML form is displayed with a file input field. <\/p>\n<ul class=\"bullet_disk_list\">\n<li>The file input field allows the user to select multiple files to upload.<\/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\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"name\"<\/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\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"email\"<\/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>Files<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);\">\"files[]\"<\/span> <span class=\"hljs-attr\">multiple<\/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);\">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-success 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 \/>\nInclude the jQuery library to use Ajax.<\/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.5.1\/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>The following jQuery code is used to post form data to the server-side script.<\/p>\n<ul class=\"step_list\">\n<li>On form submit,\n<ul class=\"bullet_disk_list\">\n<li>The Ajax request is initiated to send the form data to the server-side.<\/li>\n<li>The FormData object is used to retrieve the input fields value including files (in key\/value pairs).<\/li>\n<li>The form data is sent to the server-side script (<code>submit.php<\/code>) via Ajax to process the file upload and data submission.<\/li>\n<li>Based on the response, the status is shown on the web page.<\/li>\n<\/ul>\n<\/li>\n<li>On files select,\n<ul class=\"bullet_disk_list\">\n<li>The file type is validated using JavaScript File API (<code>this.files<\/code>).<\/li>\n<li>Allow the user to upload the only certain types of files (Image, PDF, MS Word, etc).<\/li>\n<li>If the selected file type is not matched with the allowed types, alert message is shown.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\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>&gt;<\/span>\r\n<span 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);\"><\/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\t\r\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ File type validation<\/span>\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-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);\">for<\/span>(i=<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>;i&lt;<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">this<\/span>.files.length;i++){\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[i];\r\n            <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> fileType = file.type;\r\n\t\t\t\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        }\r\n    });\r\n});<\/span>\r\n<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<h2>Upload Multiple Files and Insert Form Data (submit.php)<\/h2>\n<p>The following code handles the file upload and form submission functionality.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Retrieve the form fields data using the <b>PHP $_POST<\/b> method.<\/li>\n<li>Retrieve the file&#8217;s data using the <b>PHP $_FILES<\/b> method.<\/li>\n<li>Validate input fields to check whether the mandatory fields are empty.<\/li>\n<li>Validate email address using FILTER_VALIDATE_EMAIL in PHP.<\/li>\n<li>Check the files extension to allow certain file formats (Image, PDF, and MS Word) to upload.<\/li>\n<li>Upload file to the server using PHP <b>move_uploaded_file()<\/b> function.<\/li>\n<li>Insert form data and file names in the database.<\/li>\n<li>Return response to the Ajax request.<\/li>\n<\/ul>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/>$uploadDir&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">'uploads\/'<\/span><span style=\"color: #007700\">; <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 \/><\/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: #0000BB\">$errMsg&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/><\/span><span style=\"color: #0000BB\">$valid&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">; <br \/>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\">'files'<\/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;<\/span><span style=\"color: #0000BB\">$filesArr&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">\"files\"<\/span><span style=\"color: #007700\">]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;if(empty(<\/span><span style=\"color: #0000BB\">$name<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$valid&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;<\/span><span style=\"color: #0000BB\">$errMsg&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #DD0000\">'&lt;br\/&gt;Please&nbsp;enter&nbsp;your&nbsp;name.'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;if(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: #0000BB\">$valid&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;<\/span><span style=\"color: #0000BB\">$errMsg&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #DD0000\">'&lt;br\/&gt;Please&nbsp;enter&nbsp;your&nbsp;email.'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;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;<\/span><span style=\"color: #0000BB\">$valid&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;<\/span><span style=\"color: #0000BB\">$errMsg&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #DD0000\">'&lt;br\/&gt;Please&nbsp;enter&nbsp;a&nbsp;valid&nbsp;email.'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <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(<\/span><span style=\"color: #0000BB\">$valid&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;<\/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;<\/span><span style=\"color: #0000BB\">$fileNames&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">array_filter<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$filesArr<\/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; <br \/>&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;<\/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;if(!empty(<\/span><span style=\"color: #0000BB\">$fileNames<\/span><span style=\"color: #007700\">)){&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;foreach(<\/span><span style=\"color: #0000BB\">$filesArr<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'name'<\/span><span style=\"color: #007700\">]&nbsp;as&nbsp;<\/span><span style=\"color: #0000BB\">$key<\/span><span style=\"color: #007700\">=&gt;<\/span><span style=\"color: #0000BB\">$val<\/span><span style=\"color: #007700\">){&nbsp; <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;upload&nbsp;path&nbsp; <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\">$filesArr<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'name'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #0000BB\">$key<\/span><span style=\"color: #007700\">]);&nbsp; <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\">;&nbsp; <br \/>&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;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Check&nbsp;whether&nbsp;file&nbsp;type&nbsp;is&nbsp;valid&nbsp; <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\">);&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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\">)){&nbsp; <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;server&nbsp; <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\">$filesArr<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">\"tmp_name\"<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #0000BB\">$key<\/span><span style=\"color: #007700\">],&nbsp;<\/span><span style=\"color: #0000BB\">$targetFilePath<\/span><span style=\"color: #007700\">)){&nbsp; <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\">.<\/span><span style=\"color: #DD0000\">','<\/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{&nbsp; <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;}&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{&nbsp; <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;PDF,&nbsp;DOC,&nbsp;JPG,&nbsp;JPEG,&nbsp;&amp;&nbsp;PNG&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;}&nbsp; <br \/>&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&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;<\/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;<\/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; <br \/>&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;<\/span><span style=\"color: #0000BB\">$uploadedFileStr&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">trim<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$uploadedFile<\/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;<\/span><span style=\"color: #0000BB\">$insert&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">query<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"INSERT&nbsp;INTO&nbsp;form_data&nbsp;(name,email,file_names)&nbsp;VALUES&nbsp;('\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$name<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$email<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$uploadedFileStr<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"')\"<\/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;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;<\/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;<\/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;} <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!'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$errMsg<\/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\/upload-multiple-images-using-jquery-ajax-php\/\">Upload Multiple Images using jQuery, Ajax and PHP<\/a><\/span><\/p>\n<h2>Conclusion<\/h2>\n<p>This example code helps you to integrate web form to the website with multiple files upload functionality using jQuery, Ajax, PHP, and MySQL. You can allow the user to upload any type of files including image and PDF with the form data. The form submission handled without page refresh that makes web form user-friendly. The functionality of the <b>Ajax form with multiple file upload<\/b> script can be enhanced easily as per your needs.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>File upload with form data functionality is very useful for the web form. If you want to allow the user to send an attachment with the web form, file upload functionality needs to be integrated. <\/p>\n","protected":false},"author":1,"featured_media":4455,"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":[10],"tags":[28,132,66,16,14,67],"class_list":["post-4452","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-ajax","tag-file","tag-javascript","tag-jquery","tag-php","tag-upload","cat-10-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>Upload Multiple Files with Form Data using jQuery, Ajax, and PHP - CodexWorld<\/title>\n<meta name=\"description\" content=\"Upload multiple files with formdata - Upload image file without page refresh using jQuery, Ajax, and PHP. The simple code to upload multiple files and store form data in the database using 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\/upload-multiple-files-with-form-data-using-jquery-ajax-php\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Upload Multiple Files with Form Data using jQuery, Ajax, and PHP - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Upload multiple files with formdata - Upload image file without page refresh using jQuery, Ajax, and PHP. The simple code to upload multiple files and store form data in the database using PHP, and MySQL.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/upload-multiple-files-with-form-data-using-jquery-ajax-php\/\" \/>\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=\"2020-07-01T06:38:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2020\/06\/upload-multiple-files-with-form-data-using-jquery-ajax-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=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-files-with-form-data-using-jquery-ajax-php\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-files-with-form-data-using-jquery-ajax-php\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Upload Multiple Files with Form Data using jQuery, Ajax, and PHP\",\"datePublished\":\"2020-07-01T06:38:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-files-with-form-data-using-jquery-ajax-php\\\/\"},\"wordCount\":590,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-files-with-form-data-using-jquery-ajax-php\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/upload-multiple-files-with-form-data-using-jquery-ajax-php-mysql-codexworld.png\",\"keywords\":[\"Ajax\",\"File\",\"JavaScript\",\"jQuery\",\"PHP\",\"Upload\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-files-with-form-data-using-jquery-ajax-php\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-files-with-form-data-using-jquery-ajax-php\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-files-with-form-data-using-jquery-ajax-php\\\/\",\"name\":\"Upload Multiple Files with Form Data using jQuery, Ajax, and PHP - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-files-with-form-data-using-jquery-ajax-php\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-files-with-form-data-using-jquery-ajax-php\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/upload-multiple-files-with-form-data-using-jquery-ajax-php-mysql-codexworld.png\",\"datePublished\":\"2020-07-01T06:38:16+00:00\",\"description\":\"Upload multiple files with formdata - Upload image file without page refresh using jQuery, Ajax, and PHP. The simple code to upload multiple files and store form data in the database using PHP, and MySQL.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-files-with-form-data-using-jquery-ajax-php\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-files-with-form-data-using-jquery-ajax-php\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-files-with-form-data-using-jquery-ajax-php\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/upload-multiple-files-with-form-data-using-jquery-ajax-php-mysql-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/upload-multiple-files-with-form-data-using-jquery-ajax-php-mysql-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"upload-multiple-files-with-form-data-using-jquery-ajax-php-mysql-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-files-with-form-data-using-jquery-ajax-php\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Upload Multiple Files with Form Data using jQuery, Ajax, and 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":"Upload Multiple Files with Form Data using jQuery, Ajax, and PHP - CodexWorld","description":"Upload multiple files with formdata - Upload image file without page refresh using jQuery, Ajax, and PHP. The simple code to upload multiple files and store form data in the database using 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\/upload-multiple-files-with-form-data-using-jquery-ajax-php\/","og_locale":"en_US","og_type":"article","og_title":"Upload Multiple Files with Form Data using jQuery, Ajax, and PHP - CodexWorld","og_description":"Upload multiple files with formdata - Upload image file without page refresh using jQuery, Ajax, and PHP. The simple code to upload multiple files and store form data in the database using PHP, and MySQL.","og_url":"https:\/\/www.codexworld.com\/upload-multiple-files-with-form-data-using-jquery-ajax-php\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2020-07-01T06:38:16+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2020\/06\/upload-multiple-files-with-form-data-using-jquery-ajax-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":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/upload-multiple-files-with-form-data-using-jquery-ajax-php\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/upload-multiple-files-with-form-data-using-jquery-ajax-php\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Upload Multiple Files with Form Data using jQuery, Ajax, and PHP","datePublished":"2020-07-01T06:38:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/upload-multiple-files-with-form-data-using-jquery-ajax-php\/"},"wordCount":590,"commentCount":0,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/upload-multiple-files-with-form-data-using-jquery-ajax-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2020\/06\/upload-multiple-files-with-form-data-using-jquery-ajax-php-mysql-codexworld.png","keywords":["Ajax","File","JavaScript","jQuery","PHP","Upload"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/upload-multiple-files-with-form-data-using-jquery-ajax-php\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/upload-multiple-files-with-form-data-using-jquery-ajax-php\/","url":"https:\/\/www.codexworld.com\/upload-multiple-files-with-form-data-using-jquery-ajax-php\/","name":"Upload Multiple Files with Form Data using jQuery, Ajax, and PHP - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/upload-multiple-files-with-form-data-using-jquery-ajax-php\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/upload-multiple-files-with-form-data-using-jquery-ajax-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2020\/06\/upload-multiple-files-with-form-data-using-jquery-ajax-php-mysql-codexworld.png","datePublished":"2020-07-01T06:38:16+00:00","description":"Upload multiple files with formdata - Upload image file without page refresh using jQuery, Ajax, and PHP. The simple code to upload multiple files and store form data in the database using PHP, and MySQL.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/upload-multiple-files-with-form-data-using-jquery-ajax-php\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/upload-multiple-files-with-form-data-using-jquery-ajax-php\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/upload-multiple-files-with-form-data-using-jquery-ajax-php\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2020\/06\/upload-multiple-files-with-form-data-using-jquery-ajax-php-mysql-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2020\/06\/upload-multiple-files-with-form-data-using-jquery-ajax-php-mysql-codexworld.png","width":1366,"height":768,"caption":"upload-multiple-files-with-form-data-using-jquery-ajax-php-mysql-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/upload-multiple-files-with-form-data-using-jquery-ajax-php\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Upload Multiple Files with Form Data using jQuery, Ajax, and 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\/2020\/06\/upload-multiple-files-with-form-data-using-jquery-ajax-php-mysql-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-19O","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/4452","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=4452"}],"version-history":[{"count":2,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/4452\/revisions"}],"predecessor-version":[{"id":4454,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/4452\/revisions\/4454"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/4455"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=4452"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=4452"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=4452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}