jQuery/Ajax가 작동하지 않는 HTML 파일 업로드

Question

스택 사용자 DannYo의 comment here의 일부 코드를 통합하려고하지만 코드가 작동하지 않는 것 같습니다. 오류 및 "beforesend"함수는 매번 반환됩니다.

HTML

<form action="" method="post" enctype="multipart/form-data"> 
    <input type="file" id="file"> 
    <input type="email" id="sender" name="sender" required> 
    <input type="email" id="receiver" name="receiver" required> 
    <input type="text" id="message" name="message"> 
    <button id="send" class="button">Send it</button> 
</form> 

자바 스크립트

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

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

    $.ajax({ 
     url: 'upload.php', //server script to process data 
     type: 'POST', 
     xhr: function() { // custom xhr 

      myXhr = $.ajaxSettings.xhr(); 

      if (myXhr.upload) { // check if upload property exists 
       myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload 
      } 

      return myXhr; 

     }, 

     //Ajax events 
     beforeSend: function() { console.log("before send function works"); }, 
     success: function(e) { 
      console.log(e); 
     }, 
     error: function() { console.log("error function works"); }, 

     // Form data 
     data: formData, 

     //Options to tell JQuery not to process data or worry about content-type 
     cache: false, 
     contentType: false, 
     processData: false 
    }); 

    return false; 

}); 

PHP는 테스트 목적으로

의 upload.php 파일은 <?php echo "success"; ?>

있다

Chrome의 네트워크 개발자 도구를 사용하여 어디에서나 파일이 전송되는 것을 확인할 수 없습니다. 누구든지 내 코드에서 눈부신 구멍이 보이나요? 감사합니다

Answer 1

오류 기능이 호출되면 그 결과는 그 결과 내에있을 가능성이 큽니다. error function works이 표시되면서 어떤 오류가 반환되는지 확인하십시오.

error: function(xhr, status, error) { 
    alert(xhr.responseText); 
    // OR 
    alert(status + " : " + error); 
} 

편집 : 또한 참고로, 나는 당신이 업로드하려는 파일의 저장을 처리해야 믿습니다. T his tutorial for uploading files in php이 유용 할 수 있습니다.