Verwenden von Ajax zum Hochladen von Datei

Question

Ich habe verschiedene Variationen davon versucht (basierend auf Artikeln und anderen SO - Foren), um dies zu arbeiten, und ich habe es auf die Tatsache beschränkt, dass die Daten verloren gehen, wenn ich versuche, die zu senden form Daten zu meinem PHP-Skript. Wenn ich $ _FILES ["Datei"] ["Name"] zurücksende, ist es leer.

Ich habe getestet und meine AJAX und PHP-Skripte sind verbunden, da ich einige Daten zurückgeben kann, nur keine Formulardaten. Dies führt offensichtlich dazu, dass die Dateien nicht hochgeladen werden.

Mein aktueller Code ist in Bezug auf dieses Forum (lee8oi Antwort): jQuery Ajax File Upload ich ein neues Forum, weil diese Frage begann vor 6 Jahren gefragt wurde.

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> 

js:

$('#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

Ich denke, man muss nur die folgende Zeile

ändern

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

zu

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

oder

var fd = new FormData(this); 

Konstruktor Formdata erwartet nativer Form Element, kein Objekt jQuery. So würden document.getElementById('signUpForm'), $('#signUpForm')[0] und this alles funktionieren.

Diese answer bietet weitere Erläuterungen.