2015-01-31 2 views
0

Я создал веб-форму, где люди могут вводить регистрационную информацию и загружать изображение на наш сервер. Я могу получить их имя, адрес электронной почты и сообщение, но я не могу понять, как получить загруженный файл. Я бы хотел, чтобы страница не перезагружалась, поэтому я использую JQuery. В основном это работает, но я не могу заставить загруженный файл распознаваться в данных POST или данных FILES. Страница формы и процессора находится в одном каталоге, и изображение помещается во вложенную папку с именем uploads. Вот что у меня есть до сих пор, что не работает для прикрепления изображения. Я считаю, проблема в файле JavaScript, где я определяю var photoFile = $ ('# submitForm #photoFile'). Val(); Каков правильный способ объявления загруженного файла?Присоединение загруженного файла в виде вложения В PHPmailer и JQuery

Вот 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 = "[email protected]"; 
$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("[email protected]", "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 
} 
?> 


}); 

ответ

1

Вы не можете загружать данные и файлы с одной из форм использования ajax, но попробуйте этот код,

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

Ваше предложение сработало - я могу получить имя загруженного файла и добавить его как вложение электронной почты, но как его получить на одной странице? Я хотел бы использовать функцию (msg) для отображения успеха или ошибки. –

+0

да, вы можете использовать, я также использовал и обрабатывал ответ –

Смежные вопросы