{"id":5597,"date":"2024-04-22T05:59:05","date_gmt":"2024-04-22T05:59:05","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=5597"},"modified":"2024-04-22T06:02:02","modified_gmt":"2024-04-22T06:02:02","slug":"upload-multiple-files-with-javascript-using-php","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/upload-multiple-files-with-javascript-using-php\/","title":{"rendered":"Upload Multiple Files with JavaScript using PHP"},"content":{"rendered":"<p>Mostly the server-side scripting language such as PHP is used to <a href=\"https:\/\/www.codexworld.com\/php-file-upload\/\">upload file to the server<\/a>. With this method, an HTML form is submitted to upload the selected file to the server. To provide a better user interface, we can use client-side technology such as <a href=\"https:\/\/www.codexworld.com\/ajax-file-upload-using-jquery-php\/\">jQuery Ajax to upload files without page refresh<\/a>. Moreover, you can use simple JavaScript to upload files to the server.<\/p>\n<p>The JavaScript FormData interface provides an easy way to construct key\/value pairs with form fields and send them to the server side using the XMLHttpRequest method. This technique can be used to upload files to the server with JavaScript. In this tutorial, we will show you how to <b>upload multiple files using JavaScript<\/b>.<\/p>\n<p>In this example, we will use the FormData object to post file data to server-side script with JavaScript and upload multiple files to the server using PHP.<\/p>\n<ul>\n<li>Define HTML input element to select files.<\/li>\n<li>Restrict file types and size before uploading using JavaScript.<\/li>\n<li>Construct file data with the FormData interface.<\/li>\n<li>Send multiple files to the server-side using the fetch() method.<\/li>\n<li>Upload multiple files to the server using PHP.<\/li>\n<\/ul>\n<h2>Multiple Files Upload with JavaScript (index.html)<\/h2>\n<p><b><u>HTML Code:<\/u><\/b><br \/>\nCreate <span style=\"color: rgb(186, 98, 54);\">&lt;<span style=\"color: rgb(186, 98, 54);\">input<\/span>&gt;<\/span> elements with <code>type=\"file\"<\/code> to let the user select files.<\/p>\n<ul>\n<li>Add multiple attribute to allow the user to select more than one file.<\/li>\n<li>Specify the file types and size validation handler function (<code>fileValidation<\/code>) in onchange event.<\/li>\n<li>Define a <span style=\"color: rgb(186, 98, 54);\">&lt;<span style=\"color: rgb(186, 98, 54);\">button<\/span>&gt;<\/span> element to initiate the file upload request.<\/li>\n<li>Specify the file upload handler method (<code>UploadFiles<\/code>) in the onclick event. <\/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);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"wrapper\"<\/span>&gt;<\/span>\r\n    <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\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"status-msg\"<\/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);\">\"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>&gt;<\/span>Select 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_input\"<\/span> <span class=\"hljs-attr\">onchange<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"return fileValidation()\"<\/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\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"uploadBtn\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"btn btn-primary\"<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"UploadFiles()\"<\/span>&gt;<\/span>Upload<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">button<\/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><u>JavaScript Code:<\/u><\/b><br \/>\n<b>1.<\/b> The <code>fileValidation()<\/code> function handles the file size and type validation process.<\/p>\n<ul>\n<li>Validate file types and size before uploading multiple files with JavaScript.<\/li>\n<li>Specify the file types in the <code>allowedExtensions<\/code> variable that are allowed to be uploaded. It will check the type of the selected files and restrict if any file is selected other than the allowed file types.<\/li>\n<li>Specify the file size in the <code>allowedTotalSize<\/code> variable that is allowed to be uploaded. It will validate the combined size of all select files and make sure not exceed the allowed size.<\/li>\n<\/ul>\n<p><b>2.<\/b> The <code>UploadFiles()<\/code> function handles the multiple file upload with JavaScript.<\/p>\n<ul>\n<li>Define formData object and multiple files data using <code>formData.append()<\/code> method.<\/li>\n<li>Send file data to the server-side script (<code>upload_init.php<\/code>) using the <code>fetch()<\/code> method.<\/li>\n<li>Display status message based on the response received from the server side.<\/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-comment\" style=\"color: rgb(125, 122, 104);\">\/\/File type and size validation handler function<\/span>\r\n<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> <span class=\"hljs-title\" style=\"color: rgb(102, 132, 225);\">fileValidation<\/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);\">let<\/span> allowedExtensions = <span class=\"hljs-regexp\" style=\"color: rgb(215, 55, 55);\">\/(\\.jpg|\\.jpeg|\\.png|\\.pdf)$\/i<\/span>;\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">let<\/span> allowedTotalSize = <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">20<\/span>; <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/in MB<\/span>\r\n\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">const<\/span> fileInput = <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'file_input'<\/span>);\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">let<\/span> fileInput_length = fileInput.files.length;\r\n    \r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">let<\/span> fileSize = <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>;\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (fileInput_length &gt; <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>) {\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">for<\/span> (<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> i = <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>; i &lt; fileInput_length; i++) {\r\n            fileSize = fileSize+fileInput.files[i].size;\r\n\r\n            <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span>(!allowedExtensions.exec(fileInput.files[i].name)){\r\n                alert(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Please upload file having extensions .jpeg\/.jpg\/.png\/.pdf only.'<\/span>);\r\n                fileInput.value = <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 class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">let<\/span> fileSize_mb = (fileSize \/ <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">1024<\/span> \/ <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">1024<\/span>).toFixed(<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">2<\/span>);\r\n        \r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span>(fileSize_mb &gt; allowedTotalSize) {\r\n            alert(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'The combined size of all files should not exceed '<\/span>+allowedTotalSize+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">' MB.'<\/span>);\r\n            fileInput.value = <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\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Multiple files upload handler function<\/span>\r\n<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> <span class=\"hljs-title\" style=\"color: rgb(102, 132, 225);\">UploadFiles<\/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);\">const<\/span> fileInput = <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'file_input'<\/span>);\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">let<\/span> fileInput_length = fileInput.files.length;\r\n\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">const<\/span> formData = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> FormData();\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (fileInput_length &gt; <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>) {\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">for<\/span> (<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> i = <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>; i &lt; fileInput_length; i++) {\r\n            formData.append(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"files[]\"<\/span>, fileInput.files[i]);\r\n        }\r\n    }\r\n\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">const<\/span> messageContainer = <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.querySelector(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"#status-msg\"<\/span>);\r\n    messageContainer.innerHTML = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">''<\/span>;\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">const<\/span> btnContainer = <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.querySelector(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"#uploadBtn\"<\/span>);\r\n    btnContainer.disabled = <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span>;\r\n    btnContainer.innnerHTML = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Uploading...'<\/span>;\r\n\r\n    fetch(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"upload_init.php\"<\/span>, {\r\n        method: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"POST\"<\/span>,\r\n        body: formData\r\n    })\r\n    .then(response =&gt; response.json())\r\n    .then(data =&gt; {\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (data.status == <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">1<\/span>) {\r\n            messageContainer.innerHTML = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;div class=\"alert alert-success\"&gt;'<\/span>+data.msg+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;\/div&gt;'<\/span>;\r\n        } <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">else<\/span> {\r\n            messageContainer.innerHTML = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;div class=\"alert alert-danger\"&gt;'<\/span>+data.error+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;\/div&gt;'<\/span>;\r\n        }\r\n        btnContainer.disabled = <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>;\r\n        btnContainer.innnerHTML = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Upload'<\/span>;\r\n\r\n        setTimeout(<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            messageContainer.innerHTML = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"\"<\/span>;\r\n        }, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">5000<\/span>);\r\n    })\r\n    .catch(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">console<\/span>.error);\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 using PHP (upload_init.php)<\/h2>\n<p>This file is loaded by the fetch() method (from the client side) to perform the multiple file upload using PHP.<\/p>\n<ul>\n<li><code>$allowTypes<\/code> &#8211; The file types that are allowed to be uploaded.<\/li>\n<li><code>$uploadDir<\/code> &#8211; Folder path where the files will be stored on the server.<\/li>\n<li>Retrieve the multiple files data using the $_FILES method in PHP.<\/li>\n<li>Loop through the files and access each file&#8217;s data from multiple files.<\/li>\n<li>Check the file extension to allow certain file formats (PDF and Image) to upload.<\/li>\n<li>Upload multiple files to the server using the move_uploaded_file() function in PHP.<\/li>\n<li>Return response to the client-side script.<\/li>\n<\/ul>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/>$allowTypes&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array(<\/span><span style=\"color: #DD0000\">'jpg'<\/span><span style=\"color: #007700\">,<\/span><span style=\"color: #DD0000\">'png'<\/span><span style=\"color: #007700\">,<\/span><span style=\"color: #DD0000\">'jpeg'<\/span><span style=\"color: #007700\">,<\/span><span style=\"color: #DD0000\">'pdf'<\/span><span style=\"color: #007700\">);&nbsp; <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 \/>if(!empty(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'files'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">'name'<\/span><span style=\"color: #007700\">])){&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$uploaded_files_str&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;foreach(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'files'<\/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\">){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;File&nbsp;upload&nbsp;path <br \/>&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\">'files'<\/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;<\/span><span style=\"color: #0000BB\">$targetFilePath&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$uploadDir<\/span><span style=\"color: #007700\">.<\/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; <br \/>&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 <br \/>&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;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;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Upload&nbsp;file&nbsp;to&nbsp;server <br \/>&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\">'files'<\/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\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$uploaded_files_str&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #0000BB\">$fileName<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">',&nbsp;'<\/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;}&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$uploaded_files_str&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">trim<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$uploaded_files_str<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">',&nbsp;'<\/span><span style=\"color: #007700\">); <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$output&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;[ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'status'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&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: #DD0000\">'msg'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'Files&nbsp;have&nbsp;been&nbsp;uploaded&nbsp;successfully!&lt;br\/&gt;Uploaded&nbsp;Files:&nbsp;{'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$uploaded_files_str<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">'}' <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$output<\/span><span style=\"color: #007700\">); <br \/>}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">([<\/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\">,&nbsp;<\/span><span style=\"color: #DD0000\">'error'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'Please&nbsp;select&nbsp;files&nbsp;to&nbsp;upload!'<\/span><span style=\"color: #007700\">]); <br \/>} <br \/> <br \/><\/span><span style=\"color: #0000BB\">?&gt;<\/span><\/pre>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/ajax-file-upload-with-form-data-jquery-php-mysql\/\">Ajax File Upload with Form Data using PHP<\/a><\/span><\/p>\n<h2>Conclusion<\/h2>\n<p>Here we demonstrate a simple method to upload multiple files with JavaScript. You don&#8217;t need any third-party dependancy such as jQuery to upload files to the server. Allow the user to upload multiple images or files without page refresh using JavaScript. This example provides a user-friendly way to upload multiple files to the server with JavaScript using PHP. You can also enhance the functionality of this JavaScript multiple file upload script as needed.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mostly the server-side scripting language such as PHP is used to upload file to the server. With this method, an HTML form is submitted to upload the selected file to the server. To provide a <\/p>\n","protected":false},"author":1,"featured_media":5601,"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":[56,66,14],"class_list":["post-5597","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-file-upload","tag-javascript","tag-php","cat-10-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Upload Multiple Files with JavaScript using PHP - CodexWorld<\/title>\n<meta name=\"description\" content=\"JavaScript file upload - Upload multiple files with JavaScript. Example script to upload multiple images or files with JavaScript using PHP.\" \/>\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-javascript-using-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 JavaScript using PHP - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"JavaScript file upload - Upload multiple files with JavaScript. Example script to upload multiple images or files with JavaScript using PHP.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/upload-multiple-files-with-javascript-using-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=\"2024-04-22T05:59:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-22T06:02:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2024\/04\/upload-multiple-files-with-javascript-using-php-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\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=\"3 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-javascript-using-php\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-files-with-javascript-using-php\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Upload Multiple Files with JavaScript using PHP\",\"datePublished\":\"2024-04-22T05:59:05+00:00\",\"dateModified\":\"2024-04-22T06:02:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-files-with-javascript-using-php\\\/\"},\"wordCount\":582,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-files-with-javascript-using-php\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/upload-multiple-files-with-javascript-using-php-codexworld.png\",\"keywords\":[\"File Upload\",\"JavaScript\",\"PHP\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-files-with-javascript-using-php\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-files-with-javascript-using-php\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-files-with-javascript-using-php\\\/\",\"name\":\"Upload Multiple Files with JavaScript using PHP - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-files-with-javascript-using-php\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-files-with-javascript-using-php\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/upload-multiple-files-with-javascript-using-php-codexworld.png\",\"datePublished\":\"2024-04-22T05:59:05+00:00\",\"dateModified\":\"2024-04-22T06:02:02+00:00\",\"description\":\"JavaScript file upload - Upload multiple files with JavaScript. Example script to upload multiple images or files with JavaScript using PHP.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-files-with-javascript-using-php\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-files-with-javascript-using-php\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-files-with-javascript-using-php\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/upload-multiple-files-with-javascript-using-php-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/upload-multiple-files-with-javascript-using-php-codexworld.png\",\"width\":1920,\"height\":1080,\"caption\":\"upload-multiple-files-with-javascript-using-php-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-files-with-javascript-using-php\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Upload Multiple Files with JavaScript 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":"Upload Multiple Files with JavaScript using PHP - CodexWorld","description":"JavaScript file upload - Upload multiple files with JavaScript. Example script to upload multiple images or files with JavaScript using PHP.","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-javascript-using-php\/","og_locale":"en_US","og_type":"article","og_title":"Upload Multiple Files with JavaScript using PHP - CodexWorld","og_description":"JavaScript file upload - Upload multiple files with JavaScript. Example script to upload multiple images or files with JavaScript using PHP.","og_url":"https:\/\/www.codexworld.com\/upload-multiple-files-with-javascript-using-php\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2024-04-22T05:59:05+00:00","article_modified_time":"2024-04-22T06:02:02+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2024\/04\/upload-multiple-files-with-javascript-using-php-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":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/upload-multiple-files-with-javascript-using-php\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/upload-multiple-files-with-javascript-using-php\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Upload Multiple Files with JavaScript using PHP","datePublished":"2024-04-22T05:59:05+00:00","dateModified":"2024-04-22T06:02:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/upload-multiple-files-with-javascript-using-php\/"},"wordCount":582,"commentCount":0,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/upload-multiple-files-with-javascript-using-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2024\/04\/upload-multiple-files-with-javascript-using-php-codexworld.png","keywords":["File Upload","JavaScript","PHP"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/upload-multiple-files-with-javascript-using-php\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/upload-multiple-files-with-javascript-using-php\/","url":"https:\/\/www.codexworld.com\/upload-multiple-files-with-javascript-using-php\/","name":"Upload Multiple Files with JavaScript using PHP - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/upload-multiple-files-with-javascript-using-php\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/upload-multiple-files-with-javascript-using-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2024\/04\/upload-multiple-files-with-javascript-using-php-codexworld.png","datePublished":"2024-04-22T05:59:05+00:00","dateModified":"2024-04-22T06:02:02+00:00","description":"JavaScript file upload - Upload multiple files with JavaScript. Example script to upload multiple images or files with JavaScript using PHP.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/upload-multiple-files-with-javascript-using-php\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/upload-multiple-files-with-javascript-using-php\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/upload-multiple-files-with-javascript-using-php\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2024\/04\/upload-multiple-files-with-javascript-using-php-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2024\/04\/upload-multiple-files-with-javascript-using-php-codexworld.png","width":1920,"height":1080,"caption":"upload-multiple-files-with-javascript-using-php-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/upload-multiple-files-with-javascript-using-php\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Upload Multiple Files with JavaScript 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\/2024\/04\/upload-multiple-files-with-javascript-using-php-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-1sh","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/5597","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=5597"}],"version-history":[{"count":3,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/5597\/revisions"}],"predecessor-version":[{"id":5600,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/5597\/revisions\/5600"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/5601"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=5597"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=5597"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=5597"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}