{"id":3911,"date":"2019-03-07T21:10:56","date_gmt":"2019-03-07T21:10:56","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=3911"},"modified":"2019-03-07T21:21:25","modified_gmt":"2019-03-07T21:21:25","slug":"upload-multiple-images-without-page-refresh-jquery-ajax-php","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/upload-multiple-images-without-page-refresh-jquery-ajax-php\/","title":{"rendered":"Upload Multiple Images without Page Refresh using jQuery Ajax and PHP"},"content":{"rendered":"<p><b>File or image upload<\/b> is the most used functionality for the web application. Generally, the file upload functionality is useful when you want to allow the user to upload the file to your server. You can easily <a href=\"https:\/\/www.codexworld.com\/php-file-upload\/\">upload file using PHP<\/a> and HTML file input field. Most cases, the web application allows uploading a single file at a time. But if you want to allows the user to upload multiple files, upload all files at once will provide a great user interface.<\/p>\n<p>Using PHP, you can <b>upload multiple images<\/b> at once. But you can also provide a user-friendly interface to upload multiple images on a single click without page refresh. The images can be uploaded without page reload using jQuery and Ajax. In this tutorial, we will show you how to <b>upload multiple images without page refresh<\/b> using jQuery Ajax and PHP. The example code shows the <b>Ajax multiple images upload<\/b> process using jQuery and PHP.<\/p>\n<h2>Files Upload Form (index.html)<\/h2>\n<p>This file handles the multiple images selection, Ajax request sending process.<\/p>\n<p><b>HTML Code:<\/b><br \/>\nCreate an HTML form with a file input field that allows the user to select multiple files.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>The <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> tag must contain the <code>method=\"post\"<\/code> and <code>enctype=\"multipart\/form-data\"<\/code> attributes.<\/li>\n<li>The <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span>&gt;<\/span> tag must contain <code>type=\"file\"<\/code> and <code>multiple<\/code> attributes.<\/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);\">\"upload-div\"<\/span>&gt;<\/span>\n    <span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- File upload form --&gt;<\/span>\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>\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 Images<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>\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);\">\"images[]\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"fileInput\"<\/span> <span class=\"hljs-attr\">multiple<\/span> &gt;<\/span>\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>\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>\n\t\n    <span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- Display upload status --&gt;<\/span>\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>\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>Define a DIV element in the web page where the uploaded images will be displayed in a gallery view.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- Gallery view of uploaded images --&gt;<\/span> \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);\">\"gallery\"<\/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>JavaScript Code:<\/b><br \/>\nTo upload files, the jQuery and Ajax will be used,  include the jQuery library first.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.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 images data to the server-side script via Ajax.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>On form submission, the selected files data is sent to the server-side script (<code>upload.php<\/code>) using jQuery and Ajax.<\/li>\n<li>The FormData object is used to retrieve the submitted images data.<\/li>\n<li>Based on the response, the upload status is shown to the user and the uploaded images are appended to the specified element.<\/li>\n<li>Also, the MIME type of the selected files will be validated and restrict the user to upload only the images.<\/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>\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>{\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ File upload via Ajax<\/span>\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>{\n        e.preventDefault();\n        $.ajax({\n            type: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'POST'<\/span>,\n            url: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'upload.php'<\/span>,\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>),\n            contentType: <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>,\n            cache: <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>,\n            processData:<span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>,\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>{\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\/uploading.gif\"\/&gt;'<\/span>);\n            },\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>{\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;span style=\"color:#EA4335;\"&gt;Images upload failed, please try again.&lt;span&gt;'<\/span>);\n            },\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);\">data<\/span>)<\/span>{\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();\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;span style=\"color:#28A74B;\"&gt;Images uploaded successfully.&lt;span&gt;'<\/span>);\n                $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'.gallery'<\/span>).html(data);\n            }\n        });\n    });\n    \n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ File type validation<\/span>\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>{\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> fileLength = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">this<\/span>.files.length;\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> match= [<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>];\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> i;\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; fileLength; i++){ \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];\n            <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> imagefile = file.type;\n            <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span>(!((imagefile==match[<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>]) || (imagefile==match[<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">1<\/span>]) || (imagefile==match[<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">2<\/span>]) || (imagefile==match[<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">3<\/span>]))){\n                alert(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Please select a valid image file (JPEG\/JPG\/PNG\/GIF).'<\/span>);\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>);\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>;\n            }\n        }\n    });\n});<\/span>\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 Images using PHP (upload.php)<\/h2>\n<p>The <code>upload.php<\/code> file is called by the Ajax request to handles the images upload process using PHP.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Retrieve the images data from posted data using <b>PHP $_FILES<\/b> method.<\/li>\n<li>Upload the images to the server using <b>move_uploaded_file()<\/b> function in PHP.<\/li>\n<li>Generate HTML view with the uploaded images.<\/li>\n<\/ul>\n<pre><span style=\"color: #0000BB\">&lt;?php\n<\/span><span style=\"color: #007700\">if(!empty(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'images'<\/span><span style=\"color: #007700\">])){\n&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;File&nbsp;upload&nbsp;configuration\n&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\">;\n&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$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\">'gif'<\/span><span style=\"color: #007700\">);\n&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$images_arr&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array();\n&nbsp;&nbsp;&nbsp;&nbsp;foreach(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'images'<\/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\">){\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$image_name&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'images'<\/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\">];\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$tmp_name&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'images'<\/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\">];\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$size&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'images'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">'size'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #0000BB\">$key<\/span><span style=\"color: #007700\">];\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$type&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'images'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">'type'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #0000BB\">$key<\/span><span style=\"color: #007700\">];\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$error&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'images'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">'error'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #0000BB\">$key<\/span><span style=\"color: #007700\">];\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;File&nbsp;upload&nbsp;path\n&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\">'images'<\/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\">]);\n&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\">$targetDir&nbsp;<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$fileName<\/span><span style=\"color: #007700\">;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n&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\n&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\">,<\/span><span style=\"color: #0000BB\">PATHINFO_EXTENSION<\/span><span style=\"color: #007700\">);\n&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;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Store&nbsp;images&nbsp;on&nbsp;the&nbsp;server\n&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\">'images'<\/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\">],<\/span><span style=\"color: #0000BB\">$targetFilePath<\/span><span style=\"color: #007700\">)){\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$images_arr<\/span><span style=\"color: #007700\">[]&nbsp;=&nbsp;<\/span><span style=\"color: #0000BB\">$targetFilePath<\/span><span style=\"color: #007700\">;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n&nbsp;&nbsp;&nbsp;&nbsp;}\n&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Generate&nbsp;gallery&nbsp;view&nbsp;of&nbsp;the&nbsp;images\n&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">if(!empty(<\/span><span style=\"color: #0000BB\">$images_arr<\/span><span style=\"color: #007700\">)){&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;\n<\/span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">foreach(<\/span><span style=\"color: #0000BB\">$images_arr&nbsp;<\/span><span style=\"color: #007700\">as&nbsp;<\/span><span style=\"color: #0000BB\">$image_src<\/span><span style=\"color: #007700\">){&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;\n<\/span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;img&nbsp;src=\"<span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">echo&nbsp;<\/span><span style=\"color: #0000BB\">$image_src<\/span><span style=\"color: #007700\">;&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;<\/span>\"&nbsp;alt=\"\"&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">}&nbsp;<\/span><span style=\"color: #0000BB\">?&gt;\n<\/span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/ul&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;<span style=\"color: #0000BB\">&lt;?php&nbsp;<\/span><span style=\"color: #007700\">}\n}\n<\/span><span style=\"color: #0000BB\">?&gt;<\/span><\/pre>\n<p>You can display a preview of the selected images without uploading to the server using PHP.<\/p>\n<pre><span style=\"color: #0000BB\">$images_arr&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array();\nforeach(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'images'<\/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\">){\n&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$image_name&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'images'<\/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\">];\n&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$tmp_name&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'images'<\/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\">];\n&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$size&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'images'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">'size'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #0000BB\">$key<\/span><span style=\"color: #007700\">];\n&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$type&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'images'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">'type'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #0000BB\">$key<\/span><span style=\"color: #007700\">];\n&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$error&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'images'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">'error'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #0000BB\">$key<\/span><span style=\"color: #007700\">];\n&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;File&nbsp;upload&nbsp;path\n&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\">'images'<\/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\">]);\n&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$targetFilePath&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$targetDir&nbsp;<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$fileName<\/span><span style=\"color: #007700\">;\n&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Check&nbsp;whether&nbsp;file&nbsp;type&nbsp;is&nbsp;valid\n&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\">,<\/span><span style=\"color: #0000BB\">PATHINFO_EXTENSION<\/span><span style=\"color: #007700\">);\n&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;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Display&nbsp;images&nbsp;without&nbsp;storing&nbsp;in&nbsp;the&nbsp;server\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$img_info&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">getimagesize<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'images'<\/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\">]);\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$images_arr<\/span><span style=\"color: #007700\">[]&nbsp;=&nbsp;<\/span><span style=\"color: #DD0000\">\"data:\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$img_info<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">\"mime\"<\/span><span style=\"color: #007700\">].<\/span><span style=\"color: #DD0000\">\";base64,\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">base64_encode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">file_get_contents<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'images'<\/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\">]));\n&nbsp;&nbsp;&nbsp;&nbsp;}\n}<\/span><\/pre>\n<h2>Conclusion<\/h2>\n<p>Here we provided a simple way to <b>upload multiple images with Ajax<\/b> and PHP. Using our example script, you can easily upload multiple files\/images without any jQuery plugin. When you want to allow the user to upload multiple images, the Ajax multiple files upload functionality is very useful. To make multiple images upload functionality more user-friendly, you can use <a href=\"http:\/\/www.codexworld.com\/drag-and-drop-file-upload-using-dropzone-php\/\">Drag and drop file upload using Dropzone JS and PHP<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>File or image upload is the most used functionality for the web application. Generally, the file upload functionality is useful when you want to allow the user to upload the file to your server. You <\/p>\n","protected":false},"author":1,"featured_media":3915,"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,56,16,14,67],"class_list":["post-3911","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ajax","tag-ajax","tag-file","tag-file-upload","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>Upload Multiple Images without Page Refresh using jQuery Ajax and PHP - CodexWorld<\/title>\n<meta name=\"description\" content=\"Multiple images upload with PHP - Upload multiple images on a single click without page refresh using jQuery Ajax and PHP. Example code to implement Ajax multiple image upload functionality with 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\/upload-multiple-images-without-page-refresh-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 Images without Page Refresh using jQuery Ajax and PHP - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Multiple images upload with PHP - Upload multiple images on a single click without page refresh using jQuery Ajax and PHP. Example code to implement Ajax multiple image upload functionality with jQuery and PHP.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/upload-multiple-images-without-page-refresh-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-03-07T21:10:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-03-07T21:21:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/03\/upload-multiple-images-without-page-refresh-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=\"7 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-images-without-page-refresh-jquery-ajax-php\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-images-without-page-refresh-jquery-ajax-php\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Upload Multiple Images without Page Refresh using jQuery Ajax and PHP\",\"datePublished\":\"2019-03-07T21:10:56+00:00\",\"dateModified\":\"2019-03-07T21:21:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-images-without-page-refresh-jquery-ajax-php\\\/\"},\"wordCount\":483,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-images-without-page-refresh-jquery-ajax-php\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/03\\\/upload-multiple-images-without-page-refresh-using-jquery-ajax-php-codexworld.png\",\"keywords\":[\"Ajax\",\"File\",\"File Upload\",\"jQuery\",\"PHP\",\"Upload\"],\"articleSection\":[\"Ajax\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-images-without-page-refresh-jquery-ajax-php\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-images-without-page-refresh-jquery-ajax-php\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-images-without-page-refresh-jquery-ajax-php\\\/\",\"name\":\"Upload Multiple Images without Page Refresh using jQuery Ajax and PHP - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-images-without-page-refresh-jquery-ajax-php\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-images-without-page-refresh-jquery-ajax-php\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/03\\\/upload-multiple-images-without-page-refresh-using-jquery-ajax-php-codexworld.png\",\"datePublished\":\"2019-03-07T21:10:56+00:00\",\"dateModified\":\"2019-03-07T21:21:25+00:00\",\"description\":\"Multiple images upload with PHP - Upload multiple images on a single click without page refresh using jQuery Ajax and PHP. Example code to implement Ajax multiple image upload functionality with jQuery and PHP.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-images-without-page-refresh-jquery-ajax-php\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-images-without-page-refresh-jquery-ajax-php\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-images-without-page-refresh-jquery-ajax-php\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/03\\\/upload-multiple-images-without-page-refresh-using-jquery-ajax-php-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/03\\\/upload-multiple-images-without-page-refresh-using-jquery-ajax-php-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"upload-multiple-images-without-page-refresh-using-jquery-ajax-php-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/upload-multiple-images-without-page-refresh-jquery-ajax-php\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Upload Multiple Images without Page Refresh 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 Images without Page Refresh using jQuery Ajax and PHP - CodexWorld","description":"Multiple images upload with PHP - Upload multiple images on a single click without page refresh using jQuery Ajax and PHP. Example code to implement Ajax multiple image upload functionality with 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\/upload-multiple-images-without-page-refresh-jquery-ajax-php\/","og_locale":"en_US","og_type":"article","og_title":"Upload Multiple Images without Page Refresh using jQuery Ajax and PHP - CodexWorld","og_description":"Multiple images upload with PHP - Upload multiple images on a single click without page refresh using jQuery Ajax and PHP. Example code to implement Ajax multiple image upload functionality with jQuery and PHP.","og_url":"https:\/\/www.codexworld.com\/upload-multiple-images-without-page-refresh-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-03-07T21:10:56+00:00","article_modified_time":"2019-03-07T21:21:25+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/03\/upload-multiple-images-without-page-refresh-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":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/upload-multiple-images-without-page-refresh-jquery-ajax-php\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/upload-multiple-images-without-page-refresh-jquery-ajax-php\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Upload Multiple Images without Page Refresh using jQuery Ajax and PHP","datePublished":"2019-03-07T21:10:56+00:00","dateModified":"2019-03-07T21:21:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/upload-multiple-images-without-page-refresh-jquery-ajax-php\/"},"wordCount":483,"commentCount":2,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/upload-multiple-images-without-page-refresh-jquery-ajax-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/03\/upload-multiple-images-without-page-refresh-using-jquery-ajax-php-codexworld.png","keywords":["Ajax","File","File Upload","jQuery","PHP","Upload"],"articleSection":["Ajax"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/upload-multiple-images-without-page-refresh-jquery-ajax-php\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/upload-multiple-images-without-page-refresh-jquery-ajax-php\/","url":"https:\/\/www.codexworld.com\/upload-multiple-images-without-page-refresh-jquery-ajax-php\/","name":"Upload Multiple Images without Page Refresh using jQuery Ajax and PHP - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/upload-multiple-images-without-page-refresh-jquery-ajax-php\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/upload-multiple-images-without-page-refresh-jquery-ajax-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/03\/upload-multiple-images-without-page-refresh-using-jquery-ajax-php-codexworld.png","datePublished":"2019-03-07T21:10:56+00:00","dateModified":"2019-03-07T21:21:25+00:00","description":"Multiple images upload with PHP - Upload multiple images on a single click without page refresh using jQuery Ajax and PHP. Example code to implement Ajax multiple image upload functionality with jQuery and PHP.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/upload-multiple-images-without-page-refresh-jquery-ajax-php\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/upload-multiple-images-without-page-refresh-jquery-ajax-php\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/upload-multiple-images-without-page-refresh-jquery-ajax-php\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/03\/upload-multiple-images-without-page-refresh-using-jquery-ajax-php-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/03\/upload-multiple-images-without-page-refresh-using-jquery-ajax-php-codexworld.png","width":1366,"height":768,"caption":"upload-multiple-images-without-page-refresh-using-jquery-ajax-php-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/upload-multiple-images-without-page-refresh-jquery-ajax-php\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Upload Multiple Images without Page Refresh 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\/03\/upload-multiple-images-without-page-refresh-using-jquery-ajax-php-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-115","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3911","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=3911"}],"version-history":[{"count":3,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3911\/revisions"}],"predecessor-version":[{"id":3914,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3911\/revisions\/3914"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/3915"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=3911"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=3911"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=3911"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}