Использование Ajax для загрузки файла

Question

Я пробовал несколько вариантов этого (на основе статей и других форумов SO), чтобы заставить это работать, и я сузил его до того, что данные теряются, когда я пытаюсь отправить введите данные в мой PHP-скрипт. Когда я повторяю $ _FILES ["file"] ["name"], он пуст.

Я протестировал, и мои сценарии ajax и php подключены, так как я могу вернуть некоторые данные, а не любые данные формы. Это, очевидно, приводит к тому, что файлы не загружаются.

Мой текущий код в ссылке на этом форуме (ответ lee8oi в): jQuery Ajax File Upload Я начал новый форум, потому что этот вопрос был задан 6 лет назад.

HTML:

<form id="signUpForm" name="signUpForm" action="../functions/newUser.php" method="post"> 
    <input type="file" class="su_photo" name="file" id="user-photo"> 
    <input type="submit" id="sign-up" type="button" class="btn btn-primary btn-sm pull-right" value="Get Started"> 
</form> 

ЯШ:

$('#signUpForm').on('submit',function(){ 
     var fd = new FormData($('#signUpForm')); 
     fd.append("label", "WEBUPLOAD"); 
     $.ajax({ 
      url: "../../functions/newUser.php", 
      type: "POST", 
      data: fd, 
      processData: false, // tell jQuery not to process the data 
      contentType: false // tell jQuery not to set contentType 
     }).done(function(data) { 
      console.log("PHP Output:"); 
      console.log(data); 
     }); 
     return false; 
    }); 

PHP:

if ($_POST["label"]) { 
     $label = $_POST["label"]; 
    } 
    $allowedExts = array("gif", "jpeg", "jpg", "png"); 
    $temp = explode(".", $_FILES["file"]["name"]); 
    $extension = end($temp); 
    if ((($_FILES["file"]["type"] == "image/gif") 
    || ($_FILES["file"]["type"] == "image/jpeg") 
    || ($_FILES["file"]["type"] == "image/jpg") 
    || ($_FILES["file"]["type"] == "image/pjpeg") 
    || ($_FILES["file"]["type"] == "image/x-png") 
    || ($_FILES["file"]["type"] == "image/png")) 
    && ($_FILES["file"]["size"] < 200000) 
    && in_array($extension, $allowedExts)) { 
     if ($_FILES["file"]["error"] > 0) { 
      echo "Return Code: " . $_FILES["file"]["error"] . "<br>"; 
     } else { 
      $filename = $label.$_FILES["file"]["name"]; 
      echo "Upload: " . $_FILES["file"]["name"] . "<br>"; 
      echo "Type: " . $_FILES["file"]["type"] . "<br>"; 
      echo "Size: " . ($_FILES["file"]["size"]/1024) . " kB<br>"; 
      echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>"; 

      if (file_exists("uploads/" . $filename)) { 
       echo $filename . " already exists. "; 
      } else { 
       move_uploaded_file($_FILES["file"]["tmp_name"], 
       "uploads/" . $filename); 
       echo "Stored in: " . "uploads/" . $filename; 
      } 
     } 
    } else { 
     echo $_FILES["file"]["name"]; 
    } 

Answer 1

Я думаю, вам просто нужно изменить следующую строку

var fd = new FormData($('#signUpForm')); 

к

var fd = new FormData($('#signUpForm')[0]); 

или

var fd = new FormData(this); 

Конструктор FormData ожидает родной элемент формы, а не объект JQuery. Итак, document.getElementById('signUpForm'), $('#signUpForm')[0] и this все будут работать.

Этот answer содержит дополнительные пояснения.