使用JQUERY和PHP通过表单发送数据和图像文件

时间:2016-03-08 16:11:06

标签: javascript php jquery html forms

您好我想使用JQUERY将表单数据和用户上传的图像文件发送到我的电子邮件(我之前在send.php中定义了电子邮件地址)。

使用我当前的代码,它只发送数据而不上传图像。 但是当我删除JQUERY时,它会先转到另一个页面并返回主页面来发送它们。

我的JQUERY应该在成功发送表单后,或者即使我们收到错误,也会在同一个地方回复消息。

然后我认为我的PHP代码没有问题,因为它有效。

“我希望我的表单在将数据和图像发送到我的电子邮件后,在同一个地方显示成功的消息。”

这是JQUERY代码:

$(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;
});
});

这是我的html表单:

<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>

同样在我的send.php结束时,我定义了表单响应的打击代码。当JQUERY代码可用时它不会做任何事情。然后当我的JQUERY代码在.js文件中可用时,它会在同一页面上响应消息。但是不发送文件。它只发送联系表格的姓名和电子邮件。

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'> ");
}
?>

0 个答案:

没有答案