Input type="file" dont send files when using the jquery validation engine plugin SOLVED -
i'm using jquery-validation-engine plugin validating html form. validations works great, have 1 issue when try send files(images) input type="file". in form have many textfields, selects , 2 input fields file selection , sending on email. without validate plugin work - files , data other fields sent email. when use plugin, data textfield , selects sent.
here php code handler files attachment
// photo attachment $mime_boundary="==multipart_boundary_x".md5(mt_rand())."x"; $headers = "from: $fromemail\r\n" . "mime-version: 1.0\r\n" . "content-type: multipart/mixed;\r\n" . " boundary=\"{$mime_boundary}\""; $message = "this multi-part message in mime format.\n\n" . "--{$mime_boundary}\n" . "content-type: text/html; charset=\"iso-8859-1\"\n" . "content-transfer-encoding: 7bit\n\n" . $message . "\n\n"; foreach($_files $userfile) { $tmp_name = $userfile['tmp_name']; $type = $userfile['type']; $name = $userfile['name']; $size = $userfile['size']; if (file_exists($tmp_name)) { if(is_uploaded_file($tmp_name)) { $file = fopen($tmp_name,'rb'); $data = fread($file,filesize($tmp_name)); fclose($file); $data = chunk_split(base64_encode($data)); } $message .= "--{$mime_boundary}\n" . "content-type: {$type};\n" . " name=\"{$name}\"\n" . "content-disposition: attachment;\n" . " filename=\"{$fileatt_name}\"\n" . "content-transfer-encoding: base64\n\n" . $data . "\n\n"; } } $message.="--{$mime_boundary}--\n";
and here javascript code jquery-validation-engine plugin initialization
function initcontactform() { // hide status on contact page $('#success, #error').css('display', 'none'); // submitting contact form if ($('form#contact-form').length > 0) { var contactform = $('form#contact-form'); contactform.submit(function() { $('#success').css('display', 'none'); $('#error').css('display', 'none'); if (contactform.validationengine('validate')) { $submitbutton = $(this).find('input[type="submit"]'); $submitbutton.removeclass().addclass('flat button fullwidth disabled'); $submitbutton.attr('value', 'submitting...'); $submitbutton.attr('disabled', 'disabled'); $.ajax({ type : 'post', url : 'emailsend.php', data : contactform.serialize(), success : function(result) { if (result == 'true') { contactform.stop().animate({ opacity : '1' }, 400, function() { $submitbutton = $(this).find('input[type="submit"]'); $submitbutton.removeclass().addclass('flat button fullwidth disabled'); $submitbutton.attr('value', 'submitted'); $submitbutton.attr('disabled', 'disabled'); contactform.css('display', 'block'); $('#success').css('display', 'block'); $('#success').stop().animate({ opacity : '1' }, 900); }); } else { $('#error').css('display', 'block'); $('#error').stop().animate({ opacity : '1' }, 1000); alert('error message: ' + result); } }, error : function(xmlhttprequest, textstatus, errorthrown) { $('#error').css('display', 'block'); $('#error').stop().animate({ opacity : '1' }, 1000); alert(errorthrown); } }); return false; } }); } }
after 1 day searching google found solution. problem can use .serialize() in .ajax() collect files data. instead of use new formdata(this). here working code ajax
$.ajax({ type : 'post', url : 'emailsend.php', data : new formdata(this), processdata: false, contenttype: false, success : function(result) { ... }
here article helps me http://portfolio.planetjon.ca/2014/01/26/submit-file-input-via-ajax-jquery-easy-way/
Comments
Post a Comment