{"id":193,"date":"2014-12-25T16:30:39","date_gmt":"2014-12-25T16:30:39","guid":{"rendered":"https:\/\/www.kolkataonweb.com\/code-bank\/?p=193"},"modified":"2014-12-25T16:59:39","modified_gmt":"2014-12-25T16:59:39","slug":"upload-files-through-ajax-using-jquery","status":"publish","type":"post","link":"https:\/\/www.kolkataonweb.com\/code-bank\/jquery\/upload-files-through-ajax-using-jquery\/","title":{"rendered":"Upload Files through AJAX (using Jquery and PHP)"},"content":{"rendered":"<p>This post demonstrates how to upload files to the server through AJAX. For the javascript\u00a0 part JQuery has been used.<\/p>\n<p>Besides the file upload thing there are few other useful codes here:<\/p>\n<ul>\n<li>A generalised mail function. The function is capable of sending mails with attachments also.<\/li>\n<li>Ajax call using JQuery.<\/li>\n<li>Some server side validation codes.<\/li>\n<\/ul>\n<p><em>Things might look a little jumbled up here, suggested to copy and paste the code to some IDE or editor first.<\/em><\/p>\n<h5>Form HTML<\/h5>\n<pre class='wp-code-highlight prettyprint'>&lt;span id=\"statusMessage\"&gt;&lt;\/span&gt;\r\n\r\n&lt;form action=\"\" method=\"post\" name=\"\" id=\"form1\" enctype=\"multipart\/form-data\" onsubmit=\"return sendCareerData()\"&gt;\r\n\u00a0\u00a0\u00a0 &lt;input type=\"text\" id=\"formName\" name=\"formName\" placeholder=\"Name\" \/&gt;\r\n\u00a0\u00a0\u00a0 &lt;input type=\"text\" id=\"formEmail\" name=\"formEmail\" placeholder=\"Email\" \/&gt;\r\n\u00a0\u00a0\u00a0 &lt;input type=\"text\" id=\"formPhone\" name=\"formPhone\" placeholder=\"Phone No.\" \/&gt;\r\n\u00a0\u00a0\u00a0 &lt;input type=\"file\" id=\"formFile\" name=\"formFile\" placeholder=\"Upload File\" \/&gt;\r\n\u00a0\u00a0\u00a0 &lt;input type=\"submit\" id=\"button4\" name=\"formSubmit\" value=\"Submit\" \/&gt;\r\n&lt;\/form&gt;<\/pre>\n<h5>The Javascript part<\/h5>\n<pre class='wp-code-highlight prettyprint'>&lt;script type=\"text\/javascript\"&gt;\r\nfunction sendCareerData()\r\n{\r\n\u00a0\u00a0 \u00a0var data = new FormData(document.getElementById(\"form1\"));\r\n\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 \/\/ make the AJAX request\r\n\u00a0\u00a0\u00a0 jQuery.ajax({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 type: \"POST\",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 url: 'form-backend.php',\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 data: data,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 mimeType:\"multipart\/form-data\",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 contentType: false,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 cache: false,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 processData:false,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 dataType: 'json',\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 success: function (data) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (data.success == 0) \/\/error on server side\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/* error messages from server side validation *\/ \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var errors = '&lt;ul&gt;';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (data.name_msg != '')\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 errors += '&lt;li&gt;' + data.name_msg + '&lt;\/li&gt;';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (data.email_msg != '')\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 errors += '&lt;li&gt;' + data.email_msg + '&lt;\/li&gt;';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (data.phone_msg != '')\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 errors += '&lt;li&gt;' + data.phone_msg + '&lt;\/li&gt;';\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 jQuery(\"#statusMessage\").html(errors);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 jQuery(\"#statusMessage\").css(\"display\",\"block\");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 else if (data.success == 1) \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 jQuery(\"#statusMessage\").html(\"Thank you! We will get in touch.\");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 jQuery(\"#statusMessage\").css(\"display\",\"block\");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 },\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 error: function (error) \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 jQuery(\"#statusMessage\").html(error);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 jQuery(\"#statusMessage\").css(\"display\",\"block\");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 return false;\r\n}\r\n&lt;\/script&gt;<\/pre>\n<h5>The backend part using PHP<\/h5>\n<pre class='wp-code-highlight prettyprint'>\/******* form-backend.php *********\/\r\n&lt;?php\r\nob_start(); \/\/to suppress any newlines being sent before the header call\r\n\r\n\/********* a general mail sending function with or without attachment ***********\/\r\nfunction _mail($to, $from='', $subject = \" \", $body = \" \", $attachment = \"\" , $fileatt_type = \"\", $fileatt_name = \"\")\r\n{\r\n\u00a0\u00a0\u00a0 $headers = \"MIME-Version: 1.0\" . \"\\r\\n\";\r\n\u00a0\u00a0\u00a0 if(strlen($from))\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $headers .= 'From: ' . $from . \"\\r\\n\";\r\n\u00a0\u00a0\u00a0 $headers .= 'Bcc: yyyyy@xxxxxxx.com' . \"\\r\\n\";\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 if(strlen($attachment)) \/\/if attachment is there\r\n\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $fp = fopen($attachment, \"rb\");\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if(! $fp)\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0{\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0echo \"Cannot attach file\";\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return false;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$buffer = fread($fp, filesize($attachment));\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$attach_this=chunk_split(base64_encode($buffer));\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0fclose($fp);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $semi_rand = md5(time());\r\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$mime_boundary = \"==Multipart_Boundary_x{$semi_rand}x\"; \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 \/*'From: ' . $from . \"\\r\\n\" .\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 'Reply-To: ' . $from . \"\\r\\n\" .*\/\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $headers .= 'Content-Type: multipart\/mixed; ' . \" boundary=\"PHP-mixed-{$mime_boundary}\"\". \"\\r\\n\" . \/* THIS BOUNDARY LINE AFTER CONTENT TYPE IS IMPORTANT *\/\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/$headers .= 'X-Mailer: PHP\/' . phpversion() ; -- causing problems\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$msg = \u00a0\u00a0 \u00a0\"--PHP-mixed-{$mime_boundary}\\r\\n\" .\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"Content-Type: text\/html; charset=\"iso-8859-1\"\\r\\n\" .\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"Content-Transfer-Encoding: 7bit\\r\\n\\r\\n\". $body . \"\\r\\n\";\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $msg = \u00a0\u00a0 \u00a0\"--PHP-mixed-{$mime_boundary}\\r\\n\";\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$msg .=\u00a0 \"--PHP-mixed-{$mime_boundary}\\r\\n\" .\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"Content-Type: {$fileatt_type}; \" . \" name=\"{$fileatt_name}\"\\r\\n\" .\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"Content-Disposition: attachment; \" . \" filename=\"{$fileatt_name}\"\\r\\n\" .\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"Content-Transfer-Encoding: base64\\r\\n\\r\\n\" .\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $attach_this . \"\\r\\n\" . \/* DON'T PUT TWO NEWLINES AFTER THE ATTACHMENT *\/\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"--PHP-mixed-{$mime_boundary}--\\r\\n\"; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $body = $msg;\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 else \/\/no attachment - send simple html mail\r\n\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $headers .= \"Content-type:text\/html;charset=iso-8859-1\" . \"\\r\\n\";\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $headers .= 'X-Mailer: PHP\/' . phpversion();\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 $mail_sent = mail($to, $subject, $body, $headers);\r\n\u00a0\u00a0\u00a0 $status = $mail_sent ? \"1\" : \"0\"; \/\/1 - no error \/ success . 0 - error \/ failed\r\n\u00a0\u00a0\u00a0 return $status;\r\n}\r\n\r\n\/**** a function for validating the user inputs **********\/\r\nfunction validate($name,$email,$phone)\r\n{\r\n\u00a0 $return_array = array();\r\n\u00a0 $return_array['success'] = '1';\r\n\u00a0 $return_array['name_msg'] = '';\r\n\u00a0 $return_array['email_msg'] = '';\r\n\u00a0 $return_array['phone_msg'] = '';\r\n\r\n\u00a0 if($email == '')\r\n\u00a0 {\r\n\u00a0\u00a0\u00a0 $return_array['success'] = '0';\r\n\u00a0\u00a0\u00a0 $return_array['email_msg'] = 'email is required';\r\n\u00a0 }\r\n\u00a0 else\r\n\u00a0 {\r\n\u00a0\u00a0\u00a0 $email_exp = '\/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,4}$\/';\r\n\u00a0\u00a0\u00a0 if(!preg_match($email_exp,$email)) \r\n\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 $return_array['success'] = '0';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 $return_array['email_msg'] = 'enter valid email.'; \u00a0\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 }\r\n\r\n\u00a0 if($name == '')\r\n\u00a0 {\r\n\u00a0\u00a0\u00a0 $return_array['success'] = '0';\r\n\u00a0\u00a0\u00a0 $return_array['name_msg'] = 'Name is required';\r\n\u00a0 }\r\n\u00a0 else\r\n\u00a0 {\r\n\u00a0\u00a0\u00a0 $string_exp = \"\/^[A-Za-z .'-]+$\/\";\r\n\u00a0\u00a0\u00a0 if (!preg_match($string_exp, $name)) \r\n\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 $return_array['success'] = '0';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 $return_array['name_msg'] = 'enter valid Name.';\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 }\r\n\u00a0 \r\n\u00a0 if($phone == '')\r\n\u00a0 {\r\n\u00a0\u00a0\u00a0 $return_array['success'] = '0';\r\n\u00a0\u00a0\u00a0 $return_array['phone_msg'] = 'Phone is required';\r\n\u00a0 }\r\n\u00a0 else\r\n\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0 $string_exp = \"\/^[0-9 -]+$\/\";\r\n\u00a0\u00a0\u00a0\u00a0 if (!preg_match($string_exp, $phone)) \r\n\u00a0\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $return_array['success'] = '0';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $return_array['name_msg'] = 'enter valid Phone.';\r\n\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0 }\r\n\r\n\u00a0 return $return_array;\r\n}\r\n\r\n\/****** assigning the values to some variables for easy handling ********\/\r\n$name = $_POST['formName'];\r\n$email = $_POST['formEmail'];\r\n$phone = $_POST['formPhone'];\r\n$subject = $_POST['formSubject'];\r\n$file = $_FILES['formFile']['tmp_name'];\r\n\r\n$type = $_FILES['formFile']['type'];\r\n\r\n$return_array = validate($name,$email,$phone); \/\/ validate the user input and get the result in $return_array\r\n\r\nif($return_array['success'] == '1') \/\/if input is okay then send the mail (with attachment)\r\n{\r\n\u00a0 $body = \"&lt;strong&gt;Email = &lt;\/strong&gt;\".$email.\"&lt;br&gt;\";\r\n\u00a0 $body .= \"&lt;strong&gt;Name = &lt;\/strong&gt;\".$name.\"&lt;br&gt;\";\r\n\u00a0 $body .= \"&lt;strong&gt;Phone = &lt;\/strong&gt;\".$phone.\"&lt;br&gt;\";\r\n\u00a0 \r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 if(strlen($_FILES['formFile']['tmp_name'])) \/\/if attachment is there\r\n\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 _mail(\"zzzzz@xxxxxxx.com\",$email,$subject,$body,$file,$type,$_FILES['formFile']['name']);\r\n\u00a0\u00a0 }\r\n\u00a0\u00a0 else\r\n\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 _mail(\"zzzzz@xxxxxxx.com\",$email,$subject,$body);\r\n\u00a0\u00a0 } \r\n\u00a0 \r\n}\r\n\r\nob_end_clean();\/\/discard any output thrown above\r\nheader('Content-type: text\/json');\r\necho json_encode($return_array);\r\ndie();\r\n?&gt;<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This post demonstrates how to upload files to the server through AJAX. For the javascript\u00a0 part JQuery has been used. Besides the file upload thing there are few other useful codes here: A generalised mail function. The function is capable of sending mails with attachments also. Ajax call using JQuery. Some server side validation codes.&hellip; <a class=\"more-link\" href=\"https:\/\/www.kolkataonweb.com\/code-bank\/jquery\/upload-files-through-ajax-using-jquery\/\">Continue reading <span class=\"screen-reader-text\">Upload Files through AJAX (using Jquery and PHP)<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,3],"tags":[],"class_list":["post-193","post","type-post","status-publish","format-standard","hentry","category-jquery","category-php","entry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/posts\/193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/comments?post=193"}],"version-history":[{"count":10,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/posts\/193\/revisions"}],"predecessor-version":[{"id":205,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/posts\/193\/revisions\/205"}],"wp:attachment":[{"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/media?parent=193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/categories?post=193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/tags?post=193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}