web-dev-qa-db-fra.com

Passer des données de formulaire et un fichier à php en utilisant ajax

Cela a peut-être été demandé auparavant, mais j'ai une recherche ici et sur Google et chaque réponse que j'ai lue ne fonctionne pas.

La question que je dois résoudre est de créer un formulaire avec prénom, nom, email et une image. Transmettez ensuite les données dans une base de données et téléchargez également le fichier dans une base de données. Actuellement, mon code ne fait rien après avoir appuyé sur soumettre. Avant d’ajouter la boîte de fichiers, les données étaient insérées dans ma base de données.

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 />";
javascriptphpjqueryhtmlajax
8
Alex Clark

Les formulaires par défaut sont envoyés à l'endroit où ils sont informés. Pour arrêter cela, vous devez l’empêcher. Votre js devrait ressembler à quelque chose comme ça:

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

remplacez le bouton de type submit par le type button, puis utilisez AJAX comme suit:

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

vous devez changer le code jQuery en:

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

et changez également le code ici if ($_FILES["file"]["error"] > 0) en if ($_FILES["image"]["error"] > 0)

1
Aditya Vikas Devarapalli

Cette ligne

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

Devrait être

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