阿賈克斯接觸形式的連接

我做了一個接觸形式的作品，但現在我需要它能夠過於發送附件。我找到了一些例子，但我無法讓他們使用我現有的代碼。我寧願保留儘可能多的表單，因爲css是我喜歡的方式。我在下面的代碼中省略了驗證碼和css。阿賈克斯接觸形式的連接

<div class="contact-box" id="contact-form"> 
    <div class="contact-form"> 
     <form name="contact-form" action=""> 
      <div class="name"> 
       <span class="fa fa-user"></span> 
       <input id="name" placeholder="Name"> 
       <label class="error" for="name" id="name_error"><i class="fa fa-exclamation-triangle"></i>Please enter your name.</label> 
      </div> 
      <div class="email"> 
       <span class="fa fa-envelope"></span> 
       <input id="email" placeholder="Email"> 
       <label class="error" for="email" id="email_error"><i class="fa fa-exclamation-triangle"></i>Please enter your email address.</label> 
      </div> 
      <div class="message"> 
       <span class="fa fa-pencil"></span> 
       <textarea id="message" placeholder="Your Message"></textarea> 
       <label class="error" for="message" id="message_error"><i class="fa fa-exclamation-triangle"></i>Please enter your message</label> 
      </div> 
      <label class="attachment"> 
       <input type="file" id="fileattachment"/> 
       <span>Upload Booking Request Form</span> 
      </label> 
      <div class="submit"> 
       <input type="submit" name="submit" class="buttonsubmit" id="contact" value="Send"> 
      </div> 

     </form> 
    </div> 
</div> 
<div class="contact-box"> 
    <div class="contact-confirmation"> 
     <i class="fa fa-paper-plane"></i> 
     <h3>Thanks for your message.</h3> 
     <h4>We'll be in touch soon!</h4></div> 
</div> 

<script> 
    $(function() { 
     //Hide send confirmation 
     $(".contact-confirmation").hide(); 

     //Validate form 
     $('.error').hide(); 
     $("input#contact").click(function() { 
      $('.error').hide(); 

      var name = $("input#name").val(); 
      if (name == "") { 
       $("label#name_error").show(); 
       $("input#name").focus(); 
       return false; 
      } 

      var email = $("input#email").val(); 
      if (email == "") { 
       $("label#email_error").show(); 
       $("input#email").focus(); 
       return false; 
      } 

      var message = $("textarea#message").val(); 
      if (message == "") { 
       $("label#message_error").show(); 
       $("textarea#message").focus(); 
       return false; 
      } 

      //Attachment part??? 
      var attachment = $("#fileattachment")[0].files 

      //Send form 
      var dataString = 'name=' + name + '&email=' + email + '&message=' + message + '&attachment=' + attachment; 
      jQuery.ajax({ 
       type: "POST", 
       url: "processemail.php", 
       data: dataString, 
       success: function() { 
        jQuery(".contact-confirmation").fadeIn(1000); 
        jQuery(".contact-form").hide(); 
       } 
      }); 
      return false; 
     }); 
    });     

</script> 


//processemail.php 

<?php 

$name = $_POST["name"]; 
$email = $_POST["email"]; 
$message = $_POST["message"]; 
$sendto = $_POST["sendto"]; 

$sendto = '[email protected]'; 

$headers = "From: " . $email . "\r\n"; 
$headers .= "Reply-To: ". $email . "\r\n"; 
$headers .= "MIME-Version: 1.0\r\n"; 
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n"; 

$message = '<html><body><strong>From: </strong>' . $name . '<br /><strong>Email: </strong>' . $email . '<br /><br /><strong>Message: </strong><br />' . $message . '</body></html>'; 

mail($sendto, $subject, $message, $headers); 

?>

來源

2016-02-16 RobertN

更簡單的提交表單與文件類型和返回頁面.. – Cuchu

我同意@Cuchu - AJAX文件上傳，同時美觀大方，是沒有必要的一切。如果他們在爲Web設計的數據庫前端中做了很多其他的工作，我可能會讓他們爲AJAX添加一些文件，這樣他們就不必離開前端頁面，但是如果您只是給他們上傳表單後的成功消息，只需提交表單並查看PHP中的$ _FILES數組，更容易，在等待時執行服務器操作，然後將它們放在成功或失敗頁面上，後面帶有標題。 –

的[jQuery的阿賈克斯文件上傳（http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload） – nakashu

您需要使用formData對象提交表單。

$("form").submit(function(){ 

var formData = new FormData($(this)[0]); 

$.ajax({ 
    url: window.location.pathname, 
    type: 'POST', 
    data: formData, 
    async: false, 
    success: function (data) { 
     alert(data) 
    }, 
    cache: false, 
    contentType: false, 
    processData: false 
}); 

return false; 
});

這應該做的工作。

來源

2016-02-16 23:47:39 Ashish

我使相似的解決方案.. – Cuchu

HTML與形式，但一些修改。我使用按鈕提交和在PHP中，檢查POST和FILES變量。您需要將FILE複製到路徑。在谷歌中查找如何將文件$ _FILES複製到路徑。

<html> 
<head> 
    <title></title> 
    <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script> 
</head> 
<body> 


<div class="contact-box" id="contact-form"> 
    <div class="contact-form"> 
     <form id="data" method="post" enctype="multipart/form-data"> 
     <!--<form name="contact-form" action=""> --> 
      <div class="name"> 
       <span class="fa fa-user"></span> 
       <input id="name" placeholder="Name" name="name"> 
       <label class="error" for="name" id="name_error"><i class="fa fa-exclamation-triangle"></i>Please enter your name.</label> 
      </div> 
      <div class="email"> 
       <span class="fa fa-envelope"></span> 
       <input id="email" placeholder="Email" name="email"> 
       <label class="error" for="email" id="email_error"><i class="fa fa-exclamation-triangle"></i>Please enter your email address.</label> 
      </div> 
      <div class="message"> 
       <span class="fa fa-pencil"></span> 
       <textarea id="message" placeholder="Your Message" name="message"></textarea> 
       <label class="error" for="message" id="message_error"><i class="fa fa-exclamation-triangle"></i>Please enter your message</label> 
      </div> 
      <label class="attachment"> 
       <input type="file" id="fileattachment" name="file"/> 
       <span>Upload Booking Request Form</span> 
      </label> 
      <div class="submit"> 
       <input type="submit" name="submit" class="buttonsubmit" id="contact" value="Send"> 
      </div> 
      <button type="submit">Go</button> 

     </form> 
    </div> 
</div> 
<div class="contact-box"> 
    <div class="contact-confirmation"> 
     <i class="fa fa-paper-plane"></i> 
     <h3>Thanks for your message.</h3> 
     <h4>We'll be in touch soon!</h4></div> 
</div> 

<script> 
    $(function() { 
     //Hide send confirmation 
     $(".contact-confirmation").hide(); 

     //Validate form 
     $('.error').hide(); 
     /* 
     $("input#contact").click(function() { 
      $('.error').hide(); 

      var name = $("input#name").val(); 
      if (name == "") { 
       $("label#name_error").show(); 
       $("input#name").focus(); 
       return false; 
      } 

      var email = $("input#email").val(); 
      if (email == "") { 
       $("label#email_error").show(); 
       $("input#email").focus(); 
       return false; 
      } 

      var message = $("textarea#message").val(); 
      if (message == "") { 
       $("label#message_error").show(); 
       $("textarea#message").focus(); 
       return false; 
      } 

      //Attachment part??? 
      var attachment = $("#fileattachment")[0].files 

      //Send form 
      var dataString = 'name=' + name + '&email=' + email + '&message=' + message + '&attachment=' + attachment; 



    }); 
*/ 

    $("form#data").submit(function(){ 

console.log($(this)); 
    var formData = new FormData($(this)[0]); 

    $.ajax({ 
     url : 'processemail.php', 
     type: 'POST', 
     data: formData, 
     async: false, 
     success: function (data) { 
      alert(data) 
     }, 
     cache: false, 
     contentType: false, 
     processData: false 
    }); 

    return false; 
}); 
});     

</script> 

</body> 
</html>

而在PHP

<?php 


//var_dump($_POST); 
//var_dump($_FILES); 

$uploads_dir = ""; /* local path */ 
if(isset($_FILES['file']) && ($_FILES['file']['error'] == 0)) { 
    $tmp_name = $_FILES["file"]["tmp_name"]; 
    $name = $_FILES["file"]["name"]; 
    move_uploaded_file($tmp_name, "{$uploads_dir}{$name}"); 
} 

$name = $_POST["name"]; 
$email = $_POST["email"]; 
$message = $_POST["message"]; 
//$sendto = $_POST["sendto"]; 

$sendto = '[email protected]'; 

$headers = "From: " . $email . "\r\n"; 
$headers .= "Reply-To: ". $email . "\r\n"; 
$headers .= "MIME-Version: 1.0\r\n"; 
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n"; 

$message = '<html><body><strong>From: </strong>' . $name . '<br /><strong>Email: </strong>' . $email . '<br /><br /><strong>Message: </strong><br />' . $message . '</body></html>'; 

mail($sendto, $subject, $message, $headers); 

?>

來源

2016-02-16 23:51:37 Cuchu

我在我的本地主機測試和工作！這種方法在form> input中使用屬性名稱是隱含的。名字索引在$ _POST – Cuchu

所以我看你們和Ashish的解決方案。我不知道你可以很容易地收集表格數據。表單確實發送（如已經發送的），但仍然沒有附件。我已經搜索谷歌如何複製文件$ _FILES路徑，但我有點失去了在這個階段發生的事情，並不確定我甚至搜索什麼？ – RobertN

嗨，用這種模式，php複製文件到/ tmp目錄..你需要將文件信息找到$ _FILES到你的路徑。 – Cuchu

阿賈克斯接觸形式的連接

回答

相關問題