{"id":4250,"date":"2019-12-25T18:13:59","date_gmt":"2019-12-25T18:13:59","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=4250"},"modified":"2019-12-25T18:16:28","modified_gmt":"2019-12-25T18:16:28","slug":"file-upload-with-progress-bar-using-jquery-ajax-php","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/file-upload-with-progress-bar-using-jquery-ajax-php\/","title":{"rendered":"File Upload with Progress Bar using jQuery Ajax and PHP"},"content":{"rendered":"<p>The file upload feature is the most used functionality for the dynamic web application. The file upload functionality can be easily implemented using PHP. Generally, the page is refreshed when you <a href=\"https:\/\/www.codexworld.com\/php-file-upload\/\">upload file using PHP<\/a>. To make this file upload user-friendly, jQuery and Ajax can be used to upload files\/images without page refresh.<\/p>\n<p>While the file is uploading to the server, the web page stays on the loading state. It&#8217;s very difficult for the user to track the upload progress. <b>Progress Bar<\/b> is very useful to overcome this issue by showing the upload progress in a human-readable format. A progress bar is a graphical element that visualizes the progression of an operation. Generally, a progress bar is used to show progress representation in percentage format for upload, download, or installation. In this tutorial, we will show you how to upload file in PHP and <b>make a progress bar using jQuery<\/b> and Ajax.<\/p>\n<p>In the example <b>ajax progress bar<\/b> with percentage script, we will implement the following functionality.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>HTML form to select file.<\/li>\n<li>Display progress bar when the upload is on the process using jquery.<\/li>\n<li>Add upload completion percentage to the progress bar real-time using Ajax.<\/li>\n<li>Upload file to server using PHP.<\/li>\n<\/ul>\n<p>Before getting started to integrate <b>file upload with progress bar<\/b>, take a look at the file structure.<\/p>\n<pre class=\"file-struc\">php_file_upload_with_progress_bar_jquery<span style=\"color:#794938\">\/<\/span>\r\n\u251c\u2500\u2500 index.html\r\n\u251c\u2500\u2500 upload.php\r\n\u251c\u2500\u2500 uploads<span style=\"color:#794938\">\/<\/span>\r\n\u251c\u2500\u2500 js<span style=\"color:#794938\">\/<\/span>\r\n\u2502   \u2514\u2500\u2500 jquery.min.js\r\n\u251c\u2500\u2500 css<span style=\"color:#794938\">\/<\/span>\r\n\u2502   \u2514\u2500\u2500 style.css\r\n\u2514\u2500\u2500 images<span style=\"color:#794938\">\/<\/span>\r\n<\/pre>\n<h2>File Upload Form with Progress Bar<\/h2>\n<p>The <code>index.html<\/code> file handles the file selection and live upload progress display operations.<\/p>\n<p><b>File Upload Form:<\/b><br \/>\n<b>1.<\/b> Create an HTML form with a file input field and a submit button.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>The <span style=\"color: rgb(186, 98, 54);\">&lt;<span style=\"color: rgb(186, 98, 54);\">form<\/span>&gt;<\/span> tag must contain the <code>enctype=\"multipart\/form-data\"<\/code> attributes.<\/li>\n<li>The <span style=\"color: rgb(186, 98, 54);\">&lt;<span style=\"color: rgb(186, 98, 54);\">input<\/span>&gt;<\/span> tag must contain <code>type=\"file\"<\/code>.<\/li>\n<\/ul>\n<pre style=\"color: rgb(95, 94, 78);\"><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);\">form<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"uploadForm\"<\/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);\">label<\/span>&gt;<\/span>Choose File:<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"file\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"file\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"fileInput\"<\/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\">value<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"UPLOAD\"<\/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><\/pre>\n<p><b>2.<\/b> Define an HTML element to display the progress bar.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- Progress bar --&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);\">\"progress\"<\/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);\">\"progress-bar\"<\/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<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>3.<\/b> Define an HTML element to display the file upload status.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- Display upload status --&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);\">\"uploadStatus\"<\/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><\/pre>\n<p><b>Ajax File Upload with Progress Bar:<\/b><br \/>\nThe jQuery and Ajax is used to upload file with a progress bar, so include the jQuery library first.<\/p>\n<pre style=\"color: rgb(95, 94, 78); padding: 0.5em;\"><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.3.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 sends the selected file data to the server-side script without reloading the page via Ajax.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>On form submission, the selected file data is sent to the server-side script (<code>upload.php<\/code>) using jQuery and Ajax.\n<ul>\n<li>The <code>xhr<\/code> option of the <code>$.ajax()<\/code> method is used to track the upload progress.<\/li>\n<li>The <code>window.XMLHttpRequest()<\/code> method creates a new XMLHttpRequest object.<\/li>\n<li>The <code>progress<\/code> event of XMLHttpRequest <code>upload<\/code> property indicates the amount of progress made so far.<\/li>\n<li>The upload progress percentage is attached to the progress bar.<\/li>\n<\/ul>\n<\/li>\n<li>The FormData object is used to retrieve the submitted file data.\n<ul>\n<li>Based on the response, the upload status is displayed on the webpage.<\/li>\n<\/ul>\n<\/li>\n<li>On change event, the file type is validated based on the allowed types.\n<ul>\n<li>The File API is used to get the type of the selected file.<\/li>\n<li>The MIME type of the selected file is validated and restricts the user to upload only the image (.jpeg\/.jpg\/.png\/.gif) or PDF (.pdf) or MS Word (.doc\/.docx) file.<\/li>\n<li>The <code>includes()<\/code> method determines whether allowedTypes array contains the selected file type.<\/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); padding: 0.5em;\">$(<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);\">\/\/ File upload via Ajax<\/span>\r\n    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"#uploadForm\"<\/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            xhr: <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n                <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> xhr = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">window<\/span>.XMLHttpRequest();\r\n                xhr.upload.addEventListener(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"progress\"<\/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);\">evt<\/span>) <\/span>{\r\n                    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (evt.lengthComputable) {\r\n                        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> percentComplete = ((evt.loaded \/ evt.total) * <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">100<\/span>);\r\n                        $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\".progress-bar\"<\/span>).width(percentComplete + <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'%'<\/span>);\r\n                        $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\".progress-bar\"<\/span>).html(percentComplete+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'%'<\/span>);\r\n                    }\r\n                }, <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>);\r\n                <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">return<\/span> xhr;\r\n            },\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);\">'upload.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            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);\">\".progress-bar\"<\/span>).width(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'0%'<\/span>);\r\n                $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#uploadStatus'<\/span>).html(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;img src=\"images\/loading.gif\"\/&gt;'<\/span>);\r\n            },\r\n            error:<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);\">'#uploadStatus'<\/span>).html(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;p style=\"color:#EA4335;\"&gt;File upload failed, please try again.&lt;\/p&gt;'<\/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);\">resp<\/span>)<\/span>{\r\n                <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span>(resp == <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'ok'<\/span>){\r\n                    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#uploadForm'<\/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);\">'#uploadStatus'<\/span>).html(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;p style=\"color:#28A74B;\"&gt;File has uploaded successfully!&lt;\/p&gt;'<\/span>);\r\n                }<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">else<\/span> <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span>(resp == <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'err'<\/span>){\r\n                    $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#uploadStatus'<\/span>).html(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;p style=\"color:#EA4335;\"&gt;Please select a valid file to upload.&lt;\/p&gt;'<\/span>);\r\n                }\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-string\" style=\"color: rgb(96, 172, 57);\">\"#fileInput\"<\/span>).change(<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>)<\/span>{\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> allowedTypes = [<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);\">'application\/vnd.openxmlformats-officedocument.wordprocessingml.document'<\/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>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'image\/gif'<\/span>];\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> file = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">this<\/span>.files[<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>];\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> fileType = file.type;\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span>(!allowedTypes.includes(fileType)){\r\n            alert(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Please select a valid file (PDF\/DOC\/DOCX\/JPEG\/JPG\/PNG\/GIF).'<\/span>);\r\n            $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"#fileInput\"<\/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});<\/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 File to Server using PHP<\/h2>\n<p>The <code>upload.php<\/code> file is called by the Ajax request to handles the file upload process with PHP.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Retrieve the file information from posted data using the <b>PHP $_FILES<\/b> method.<\/li>\n<li>Upload the file to the server using <b>move_uploaded_file()<\/b> function in PHP.<\/li>\n<li>Render file upload status that returns to the Ajax success function.<\/li>\n<\/ul>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/>$upload&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">'err'<\/span><span style=\"color: #007700\">; <br \/>if(!empty(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'file'<\/span><span style=\"color: #007700\">])){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;File&nbsp;upload&nbsp;configuration <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$targetDir&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"uploads\/\"<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/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\">,&nbsp;<\/span><span style=\"color: #DD0000\">'gif'<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$fileName&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">basename<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'file'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">'name'<\/span><span style=\"color: #007700\">]); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$targetFilePath&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$targetDir<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$fileName<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Check&nbsp;whether&nbsp;file&nbsp;type&nbsp;is&nbsp;valid <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$fileType&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">pathinfo<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$targetFilePath<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">PATHINFO_EXTENSION<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">in_array<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$fileType<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$allowTypes<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Upload&nbsp;file&nbsp;to&nbsp;the&nbsp;server <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">if(<\/span><span style=\"color: #0000BB\">move_uploaded_file<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'file'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">'tmp_name'<\/span><span style=\"color: #007700\">],&nbsp;<\/span><span style=\"color: #0000BB\">$targetFilePath<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$upload&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">'ok'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>} <br \/>echo&nbsp;<\/span><span style=\"color: #0000BB\">$upload<\/span><span style=\"color: #007700\">; <br \/><\/span><span style=\"color: #0000BB\">?&gt;<\/span><\/pre>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/upload-multiple-images-without-page-refresh-jquery-ajax-php\/\">Upload Multiple Images without Page Refresh using jQuery Ajax and PHP<\/a><\/span><\/p>\n<h2>Conclusion<\/h2>\n<p>The progress bar provides and user-friendly way of showing the upload completion status in real-time. You can add the <b>jQuery progress bar<\/b> to file upload and display percentage progress bar while the file is uploading to the server. The progress bar can be added to any type of file upload (image, pdf, doc, docx, audio, video, etc) in PHP. Our example code helps you to easily make the progress bar with percentage for upload, download, and installation operations.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The file upload feature is the most used functionality for the dynamic web application. The file upload functionality can be easily implemented using PHP. Generally, the page is refreshed when you upload file using PHP. <\/p>\n","protected":false},"author":1,"featured_media":4253,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[7],"tags":[28,132,16,14,67],"class_list":["post-4250","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ajax","tag-ajax","tag-file","tag-jquery","tag-php","tag-upload","cat-7-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>File Upload with Progress Bar using jQuery Ajax and PHP - CodexWorld<\/title>\n<meta name=\"description\" content=\"Upload file with progress bar - Ajax file upload with progress bar in PHP using jQuery. Ajax progress bar with percentage and upload file without page refresh using jQuery and 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\/file-upload-with-progress-bar-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=\"File Upload with Progress Bar using jQuery Ajax and PHP - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Upload file with progress bar - Ajax file upload with progress bar in PHP using jQuery. Ajax progress bar with percentage and upload file without page refresh using jQuery and PHP.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/file-upload-with-progress-bar-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=\"2019-12-25T18:13:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-12-25T18:16:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/12\/file-upload-with-progress-bar-using-jquery-ajax-php-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/file-upload-with-progress-bar-using-jquery-ajax-php\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/file-upload-with-progress-bar-using-jquery-ajax-php\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"File Upload with Progress Bar using jQuery Ajax and PHP\",\"datePublished\":\"2019-12-25T18:13:59+00:00\",\"dateModified\":\"2019-12-25T18:16:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/file-upload-with-progress-bar-using-jquery-ajax-php\\\/\"},\"wordCount\":641,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/file-upload-with-progress-bar-using-jquery-ajax-php\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/file-upload-with-progress-bar-using-jquery-ajax-php-codexworld.png\",\"keywords\":[\"Ajax\",\"File\",\"jQuery\",\"PHP\",\"Upload\"],\"articleSection\":[\"Ajax\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/file-upload-with-progress-bar-using-jquery-ajax-php\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/file-upload-with-progress-bar-using-jquery-ajax-php\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/file-upload-with-progress-bar-using-jquery-ajax-php\\\/\",\"name\":\"File Upload with Progress Bar using jQuery Ajax and PHP - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/file-upload-with-progress-bar-using-jquery-ajax-php\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/file-upload-with-progress-bar-using-jquery-ajax-php\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/file-upload-with-progress-bar-using-jquery-ajax-php-codexworld.png\",\"datePublished\":\"2019-12-25T18:13:59+00:00\",\"dateModified\":\"2019-12-25T18:16:28+00:00\",\"description\":\"Upload file with progress bar - Ajax file upload with progress bar in PHP using jQuery. Ajax progress bar with percentage and upload file without page refresh using jQuery and PHP.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/file-upload-with-progress-bar-using-jquery-ajax-php\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/file-upload-with-progress-bar-using-jquery-ajax-php\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/file-upload-with-progress-bar-using-jquery-ajax-php\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/file-upload-with-progress-bar-using-jquery-ajax-php-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/file-upload-with-progress-bar-using-jquery-ajax-php-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"file-upload-with-progress-bar-using-jquery-ajax-php-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/file-upload-with-progress-bar-using-jquery-ajax-php\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"File Upload with Progress Bar 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":"File Upload with Progress Bar using jQuery Ajax and PHP - CodexWorld","description":"Upload file with progress bar - Ajax file upload with progress bar in PHP using jQuery. Ajax progress bar with percentage and upload file without page refresh using jQuery and 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\/file-upload-with-progress-bar-using-jquery-ajax-php\/","og_locale":"en_US","og_type":"article","og_title":"File Upload with Progress Bar using jQuery Ajax and PHP - CodexWorld","og_description":"Upload file with progress bar - Ajax file upload with progress bar in PHP using jQuery. Ajax progress bar with percentage and upload file without page refresh using jQuery and PHP.","og_url":"https:\/\/www.codexworld.com\/file-upload-with-progress-bar-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":"2019-12-25T18:13:59+00:00","article_modified_time":"2019-12-25T18:16:28+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/12\/file-upload-with-progress-bar-using-jquery-ajax-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":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/file-upload-with-progress-bar-using-jquery-ajax-php\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/file-upload-with-progress-bar-using-jquery-ajax-php\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"File Upload with Progress Bar using jQuery Ajax and PHP","datePublished":"2019-12-25T18:13:59+00:00","dateModified":"2019-12-25T18:16:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/file-upload-with-progress-bar-using-jquery-ajax-php\/"},"wordCount":641,"commentCount":2,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/file-upload-with-progress-bar-using-jquery-ajax-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/12\/file-upload-with-progress-bar-using-jquery-ajax-php-codexworld.png","keywords":["Ajax","File","jQuery","PHP","Upload"],"articleSection":["Ajax"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/file-upload-with-progress-bar-using-jquery-ajax-php\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/file-upload-with-progress-bar-using-jquery-ajax-php\/","url":"https:\/\/www.codexworld.com\/file-upload-with-progress-bar-using-jquery-ajax-php\/","name":"File Upload with Progress Bar using jQuery Ajax and PHP - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/file-upload-with-progress-bar-using-jquery-ajax-php\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/file-upload-with-progress-bar-using-jquery-ajax-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/12\/file-upload-with-progress-bar-using-jquery-ajax-php-codexworld.png","datePublished":"2019-12-25T18:13:59+00:00","dateModified":"2019-12-25T18:16:28+00:00","description":"Upload file with progress bar - Ajax file upload with progress bar in PHP using jQuery. Ajax progress bar with percentage and upload file without page refresh using jQuery and PHP.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/file-upload-with-progress-bar-using-jquery-ajax-php\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/file-upload-with-progress-bar-using-jquery-ajax-php\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/file-upload-with-progress-bar-using-jquery-ajax-php\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/12\/file-upload-with-progress-bar-using-jquery-ajax-php-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/12\/file-upload-with-progress-bar-using-jquery-ajax-php-codexworld.png","width":1366,"height":768,"caption":"file-upload-with-progress-bar-using-jquery-ajax-php-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/file-upload-with-progress-bar-using-jquery-ajax-php\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"File Upload with Progress Bar 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\/2019\/12\/file-upload-with-progress-bar-using-jquery-ajax-php-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-16y","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/4250","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=4250"}],"version-history":[{"count":2,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/4250\/revisions"}],"predecessor-version":[{"id":4252,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/4250\/revisions\/4252"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/4253"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=4250"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=4250"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=4250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}