Sending data and image file through form using JQUERY and PHP

Question

Hello I want to send form data and the image file which users upload, to my e-mail (that I defined email address previously in send.php), using JQUERY.

With my current codes, it just sends data and not uploaded image. But when I remove JQUERY, it sends both by going to another page first and returning back to main page.

My JQUERY should responds with a message on the same place after sending the form successfully or even if we get error.

Then I have not problem in my PHP code I think because it works.

"I want my form shows successful message on same place after it sends data and image to my e-mail."

Here is JQUERY code:

$(document).ready(function() {
$(".validate").validate();
$(document).on('submit', '.contact-form', function() {
$.ajax({
  url : 'send.php',
  type : 'post',
  data : $(this).serialize(),
  success : function(data) {
$('.form-respond').html("<div class='content-message success'><h2>SENT SUCCESSFULLY</h2></div>");
  },
  error : function(xhr, err) {
    $('.form-respond').html("<div class='content-message'><h2>ERROR. PLEASE  TRY AGAIN</h2></div>");
  }
});
return false;
});
});

and here is my html form:

<div class="sidebyside">
<form class="contact-form col-md-6 fade-down validate" id="form1" method="post" action="send.php" enctype="multipart/form-data">
<div class="form-group">
  <div class="buy"> BUY </div>
  <input type="name" name="Name" id="name" class="" placeholder="name" required>
  <input type="email" name="Email" id="email" class="" placeholder="email" required>
  <input type="file" name="attachment" size="40" class="eses" id="attachment">
  <input type="hidden" name="Price1" id="Price1" value="">
  <input type="text" name="Message" id="Price" value="" readonly>
  <div class="submithelp"></div>
  <div><span class="email-ico"><img src="img/bit.png" alt=""></span>
  <!-- <input type="hidden" value="1" name="submit" /> -->
  <button id="submit" type="submit" class="btn-submit"> Submit <i class="fa fa-angle-right"></i></button>
  </div>
 <div class="form-respond"></div>
 </div>
  </form>
  </div>

Also at the end of my send.php I defined blow code for form responding. That it does not do anything when the JQUERY code is available. Then when my JQUERY code is available in .js file, it responds there on same page with message. But does not send file. It only sends name and email of contact form.

if(!$mail->Send()) {
echo '<div class="error">'.$error.'</div>' . $mail->ErrorInfo;
echo ("<meta http-equiv='refresh' content='1; url=http://example.com'> ");
} else {
echo '<div class="ok">'.$accept.'</div>';
echo ("<meta http-equiv='refresh' content='1; url=http://example.com'> ");
}
?>

You can't send file this way through xmlhttprequest (ajax). What you can do is get its base64 (using the File API) data and send it. I suggest to take a look at this thread: http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload — Christian Benseler, Mar 08 '16 at 16:13
@rory-mccrossan I looked at more than 10 answers but didn't find a simple and short answer about posting both data and file together. — Joe, Mar 09 '16 at 00:09

Sending data and image file through form using JQUERY and PHP

0 Answers0