web-dev-qa-db-de.com

Formulardaten und Dateien mit ajax an php übergeben

Das wurde vielleicht schon früher gefragt, aber ich habe hier und bei Google gesucht und jede Antwort, die ich gelesen habe, funktioniert nicht.

Die Frage, die ich lösen muss, ist das Erstellen eines Formulars mit Vorname, Nachname, E-Mail-Adresse und einem Bild. Übergeben Sie dann die Daten in eine Datenbank und laden Sie die Datei auch in eine Datenbank hoch. Derzeit macht mein Code nichts, nachdem ich auf "Senden" geklickt habe. Bevor ich die Dateikiste hinzufügte, wurden die Daten in meine Datenbank eingefügt.

HTML

<form id="myForm" method ="post" enctype="multipart/form-data">
    First Name: <input type="text" name="fname" id="fname"> <br>
    Last Name: <input type="text" name="lname" id="lname"> <br>
    Email:  <input type="text" name="email" id="email"> <br>
    Image: <input type="file" name="image" id="image"> <br>
    <button type="button" name="btnSubmit" id="btnSubmit"> Submit </button>
</form>

AJAX/JS

$("#btnSubmit").click(function(){
     var formData = new FormData($(this)[0]);
     $.ajax({
        type: 'POST',
        url: 'form2.php',
        data: formData,
         success: function (data) {
           alert(data)
         },
      });
  });

PHP

$upload = basename($_FILES['image']['name']);
$type = substr($upload, strrpos($upload, '.') + 1);
$size = $_FILES['image']['size']/1024; 

if ($_FILES["image"]["error"] > 0)
{
    echo "Error: " . $_FILES["image"]["error"] . "<br>";
}
else
{
    echo "Upload: " . $upload . "<br>";
    echo "Type: " . $type . "<br>";
    echo "Size: " . $size . " kB<br>";
}

$fname = $_POST['fname'];
$lname = $_POST['lname'];
$email = $_POST['email'];
echo "You Entered <br />";
echo "<b>First Name:</b> ". $fname . "<br />";
echo "<b>Last Name:</b> ". $lname . "<br />";
echo "<b>Email:</b> ". $email . "<br />";
8
Alex Clark

Formulare senden standardmäßig an, wo auch immer sie angezeigt werden. Um dies zu stoppen, müssen Sie es verhindern. Ihre Js sollten ungefähr so ​​aussehen:

$("form#data").submit(function(event){
    event.preventDefault();
    ...
});
1
Rich Hatch

Ändern Sie die Schaltfläche submit type in button type und verwenden Sie AJAX wie folgt:

<button type="button" name="btnSubmit" id="btnSubmit"> Submit </button>

sie müssen den jQuery-Code ändern in:

$("#btnSubmit").click(function(){
     var formData = new FormData($("#myForm"));
     $.ajax({
        type: 'POST',
        url: 'form2.php',
        data: formData,
         success: function (data) {
           alert(data)
         },
      });
  });  

und ändere auch den Code hier if ($_FILES["file"]["error"] > 0) in if ($_FILES["image"]["error"] > 0)

Diese Linie

if ($_FILES["file"]["error"] > 0)

Sollte sein

 if ($_FILES["image"]["error"] > 0)
0
Gavin