Question

我创建了一个网络表单，人们可以在其中输入注册信息并将图像上传到我们的服务器。我可以得到他们的姓名，电子邮件和消息，但我无法弄清楚如何获取上传的文件。我希望页面不会重新加载，这就是我使用JQuery的原因。它主要起作用，但我无法在POST数据或FILES数据中识别上传的文件。表单和处理器页面位于同一目录中，图像放在名为uploads的子文件夹中。这是我到目前为止无法附加图像的内容。我认为问题出在我定义var photoFile = $（＆＃39; #submitForm＃photoFile＆＃39;）的JavaScript文件中.val（）;声明上传文件的正确方法是什么？

这是HTML表单：

form action="../inc/sendPhotoEmail.php" name="submitForm" id="submitForm" method="post" 
enctype="multipart/form-data">

   <label for="submitName">Name <span class="required">*</span></label>
   <input name="submitName" type="text" id="submitName" size="35" value="" />

   <label for="submitEmail">Email <span class="required">*</span></label>
   <input name="submitEmail" type="text" id="submitEmail" size="35" value="" />                       

    <label  for="submitMessage">Tell us what you want fixed <span class="required">*</span></label>
    <textarea name="submitMessage"  id="submitMessage" rows="10" cols="50" ></textarea>

    <label for="attach_photo">Attach Your Photo<span class="required"/>*</span></label>
    <input type="file" name="photoFile" id="photoFile" accept="image/*"/>

    <button class="submit" name="submitFormSubmit" value="Submit">Submit</button>
    <span id="image-loader"><img src="images/loader.gif" alt="" /></span>
</form> <!-- Form End -->

<!-- contact-warning -->
<div id="message-warning"></div>
<!-- contact-success -->
<div id="message-success">
 <i class="icon-ok"></i>Your message was sent, thank you!<br />
</div>

javascript：

jQuery(document).ready(function() {

   $('form#submitForm button.submit').click(function() {

      $('#image-loader').fadeIn();

      var submitName = $('#submitForm #submitName').val();
      var submitEmail = $('#submitForm #submitEmail').val();   
      var submitMessage = $('#submitForm #submitMessage').val();
      var photoFile = $('#submitForm #photoFile').val();

      var data = 'submitName=' + submitName + '&submitEmail=' + submitEmail +
        '&submitMessage=' + submitMessage + $photoFile='+ photoFile;         

      $.ajax({

          type: "POST",
          url: "inc/sendPhotoEmail.php",
          data: data,
          success: function(msg) {

            // Message was sent
            if (msg == 'OK') {
               $('#image-loader').fadeOut();
               $('#message-warning').hide();
               $('#submitForm').fadeOut();
               $('#message-success').fadeIn();   
            }
            // There was an error
            else {
               $('#image-loader').fadeOut();
               $('#message-warning').html(msg);
                $('#message-warning').fadeIn();
            }

          }

      });

      return false;

   });

PHP文件：

<?php

require_once('class.phpmailer.php');

$ourEmail = "repair@myemail.net";
$target_dir = "../uploads/";

if($_POST) {   

   $name = trim(stripslashes($_POST['submitName']));
   $email = trim(stripslashes($_POST['submitEmail']));
   $emailMessage = trim(stripslashes($_POST['submitMessage']));

   $image_attachment = $_POST["photoFile"]; // <---- this doesn't print anything
   $targetFile = $target_dir . basename($_FILES["photoFile"]["name"]);
   echo "targetFile = ". $targetFile . "<br/>"; // <-- this only prionts the subdirectory

   move_uploaded_file($_FILES["photoFile"]["tmp_name"],$target_dir.$_FILES["photoFile"]["name"]);

   echo "Uploaded File :".$_FILES["photoFile"]["name"]. "<br/>";
   $target_file = $target_dir . basename($_FILES["photoFile"]["name"]);
   echo "target_file = ". $target_file . "<br/>";

   $mail = new PHPMailer();                    //Create a new PHPMailer instance
   $mail->isSendmail();                        // Set PHPMailer to use the sendmail transport

   // Set Message
    $mail->setFrom($email, $name);                          //Set who the message is to be sent from
    $mail->addReplyTo("replyto@example.com", "First Last"); //Set an alternative reply-to address
    $mail->addAddress($ourEmail, "Figley T. Whitesides");   //Set who the message is to be sent to
    $mail->Subject = "Repair Form Submission";              //Set the subject line
    $mail->WordWrap = 80;
    $mail->msgHTML($emailMessage);                          //Create message bodies and embed images
    $mail->addAttachment($target_file);                     //Attach an image file

    if (!$error) {
    //send the message, check for errors
        if (!$mail->send()) {
             $mail->ErrorInfo;
         } else {
             $response = "Photo sent!";
            } // end if - no validation error
    }

    else{
        $response = (isset($error['name'])) ? $error['name'] . "<br /> \n" : null;
        $response .= (isset($error['email'])) ? $error['email'] . "<br /> \n" : null;
        $response .= (isset($error['message'])) ? $error['message'] . "<br />" : null;
        $response .= (isset($error['attachment'])) ? $error['attachment'] . "<br />" : null;

        echo $response;
        } // end if - there was a validation error
}
?>


});

Answer 1

您无法使用ajax上传包含一个表单的数据和文件，但请尝试使用此代码

$("form#data").submit(function() {
    var formData = new FormData($(this)[0]);
    $.post($(this).attr("action"), formData, function() {
        // success    
    });
    return false;
});

将上载的文件作为附件附加在PHPmailer和Jquery中

1 个答案: