Envoi fichier à MySQL en AJAX

**yoannh21** · 06/06/2020, 18h46

Bonjour à tous et toutes,

Je rencontre un problème pour envoyer des fichiers en AJAX à mysql, j'ai le code suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
function envoyerfichier(){
    var variable = $("#fichier").val();
    $.ajax({
        url: "control/envoyer-fichier.php",
        type:"POST",
        data: "fichier="+variable,
    });
    document.getElementById('formulaire').submit();
}

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<form method="post" action="control/envoyer-fichier.php" id="formulaire" class="formulaire" enctype="multipart/form-data">
<input type="file" name="fichier" id="fichier">
<input type="submit" value="envoi" name="envoi" id="envoi">

Sur control/envoyer-fichier.php je récupère la variable suivante:

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

$_FILES['fichier']['tmp_name']

**yoannh21** · 06/06/2020, 18h51

j'ai oublié une ligne avec un autre champ et le onclick pour déclencher la fonction:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text" name="message" id="message" onKeyPress="if (event.keyCode == 13) envoyerfichier()" placeholder="  Votre message"/>

Bref ça marche pas, peut être que je ne récupère pas la bonne variable sur envoyer-fichier.php je ne sais pas.

**Toufik83** · 07/06/2020, 05h46

Bonjour,

Tu ne peux pas envoyer un fichier via ajax sans l'objet FormData() et les propriétés contentType:false et processData:false.

Ton code doit être ainsi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
function envoyerfichier(e){
    e.preventDefault();//obligatoire pour empêcher le formulaire d'être soumit avec la méthode classique
    let fd=new FormData();
    fd.append("fichier",$("#fichier").get(0).files)
    $.ajax({
        url: "control/envoyer-fichier.php",
        type:"POST",
        data: fd,//obligatoire
        contentType:false,//obligatoire
        processData:false//obligatoire
     });
}
$(document).ready(function(){
   $("#formulaire").submit(envoyerFichier);//attacher l'événement submit au <form id="formulaire">
});

Regarde l'exemple d'ajax en bas de page.

**yoannh21** · 07/06/2020, 10h46

Ca n'a pas l'air de marcher. Qu'est ce que je récupère en php comme variable: $_FILES['fichier']['tmp_name'] ?

Autres questions:
-si j'envoi un formulaire classique ça marche mais après à chaque fois que j'envoi un message il y'a la pièce jointe que j'avais chargé, comment la retirer ?
-et comment faire apparaitre une popup quand la pièce jointe=le fichier est chargé ? (bon je connais le alert("la pièce jointe a bien été chargée"); mais la déclencher quand le fichier est chargé ça je sais pas faire).

**Toufik83** · 07/06/2020, 13h55

Bonjour,

Si, cela fonctionne, et je viens de tester en corrigeant quelques erreurs +l'ajout du bouton <input type="reset" /> pour vider le formulaire :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8" />
	<!-- jQuery -->
	<script
            src="https://code.jquery.com/jquery-3.5.1.js"
            integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
            crossorigin="anonymous">
        </script>
	<script>
                function envoyerfichier(e){
                        e.preventDefault();//obligatoire pour empêcher le formulaire d'être soumit avec la méthode classique
                        let fd=new FormData();
                        fd.append("fichier",$("#fichier").get(0).files[0])
                        $.ajax({
                                url: "control/envoyer-fichier.php",
                                type:"POST",
                                data: fd,//obligatoire
                                contentType:false,//obligatoire
                                processData:false//obligatoire
                        })
                        .done(function(data){//en cas de succès
                                console.log('done :',data);//ouvre la console du navigateur pour voir cette ligne
                        })
                        .fail(function(erreur){//en cas d'erreur
                                alert("Erreur ajax :"+erreur);
                        });
                }
                $(document).ready(function(){
                   $("#formulaire").submit(envoyerfichier);//attacher l'événement submit au <form id="formulaire">
                });
        </script>
</head>
<body>
	<form method="post" action="control/envoyer-fichier.php" id="formulaire" class="formulaire" enctype="multipart/form-data">
		<input type="file" name="fichier" id="fichier">
		<input type="submit" value="envoi" name="envoi" id="envoi">
		<input type='reset' value="Vider le formulaire" />
	</form>
</body>
</html>

Et le fichier envoyer-fichier.php :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<?php 
if(isset($_FILES["fichier"])){
  echo "tmp_name :".$_FILES["fichier"]['tmp_name'];
}else{
	echo "aucun fichier!";
}

**yoannh21** · 07/06/2020, 15h04

Ok ça marche. Un grand merci à toi Toufik, grand maître de l'AJAX !

Ne reste plus que ma pop up quand le fichier est chargé car j'ai mis une épingle à la place de l'input donc je n'ai pas le nom du fichier chargé qui s'affiche.

Envoi fichier à MySQL en AJAX

AJAX

Vue hybride

Discussions similaires

Partager

Partager