2015-01-31 3 views
0

사람들이 등록 정보를 입력하고 이미지를 Google 서버에 업로드 할 수있는 웹 양식을 만들었습니다. 나는 그들의 이름, 이메일 및 메시지를 얻을 수 있지만 업로드 된 파일을받는 방법을 알 수는 없습니다. 페이지가 재로드되지 않도록하고 싶습니다. 그래서 JQuery를 사용하고 있습니다. 대부분 작동하지만 업로드 된 파일을 POST 데이터 또는 파일 데이터에서 인식 할 수 없습니다. 양식과 프로세서 페이지는 동일한 디렉토리에 있으며 이미지는 업로드라는 하위 폴더에 저장됩니다. 여기에 내가 지금까지 가지고있는 것은 이미지 부착을 위해 작동하지 않는 것이다. 나는 문제가 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> 

자바 스크립트 :

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

당신은 하나의 양식을 사용하여 데이터 및 파일을 업로드 할 수 없습니다 아약스,하지만이 코드를 시도하십시오

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

제안 사항 - 업로드 된 파일 이름을 가져 와서 전자 메일 첨부 파일로 추가 할 수 있지만 어떻게 동일한 페이지에서 가져올 수 있습니까? 성공 또는 오류를 표시하려면 함수 (msg)를 사용하고 싶습니다. –

+0

예 응답을 처리하고 사용했습니다. –

관련 문제