Trasmissione di dati e file di form a php utilizzando ajax

Questo potrebbe essere stato chiesto prima, ma ho la ricerca su qui e su google e ogni risposta che ho letto non funziona.

La domanda che devo risolvere è creare un modulo con nome, cognome, email e un’immagine. Quindi passare i dati in un database e caricare il file anche in un database. Attualmente il mio codice non fa nulla dopo aver premuto invio. Prima che aggiungessi la casella dei file, inserirò i dati nel mio database.

HTML

First Name:
Last Name:
Email:
Image:

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"] . "
"; } else { echo "Upload: " . $upload . "
"; echo "Type: " . $type . "
"; echo "Size: " . $size . " kB
"; } $fname = $_POST['fname']; $lname = $_POST['lname']; $email = $_POST['email']; echo "You Entered
"; echo "First Name: ". $fname . "
"; echo "Last Name: ". $lname . "
"; echo "Email: ". $email . "
";

I moduli per impostazione predefinita vengono inviati ovunque vengano indicati. Per evitare questo, è necessario prevenirlo. Il tuo js dovrebbe assomigliare a questo:

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

cambia il pulsante di submit tipo di button e quindi usa AJAX in questo modo:

  

è necessario modificare il codice jQuery in:

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

e cambia anche il codice qui if ($_FILES["file"]["error"] > 0) a if ($_FILES["image"]["error"] > 0)

Questa linea

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

Dovrebbe essere

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