Envoi fichier à MySQL en AJAX

Version imprimable

Bonjour à tous et toutes,

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

Code:

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:

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:

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

06/06/2020, 18h51
yoannh21

oubli

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

Code:

<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.

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:

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.

07/06/2020, 10h46
yoannh21

Merci mais ça ne marche pas

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).

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:

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:

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

07/06/2020, 15h04
yoannh21

Miracle !

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.
07/06/2020, 15h43
Toufik83

Bonjour,

Pour récupérer le nom du fichier c'est $_FILES["fichier"]["name"] et il va falloir aussi vérifier son type avec $_FILES['fichier']['type'] et sa taille $_FILES['fichier']['size'].
07/06/2020, 15h45
yoannh21

Bonjour,

Oui pas de soucis pour ça je suis bon en php. Tu sais pas pour la pop up du coup ?
07/06/2020, 15h57
Toufik83
Si tu veux afficher seulement le nom du fichier dans un <p> par exemple, tu peux préparer un <p id="nomFichier"></p> dans la page index, puis tu ajoutes cette ligne dans done d'ajax :
Code:

1 2 3 4 .done(function(data){ $("#nomFichier").text(data); })
Mais le fichier php doit retourner le nom : echo "nom fichier :".$_FILES["fichier"]["name"].
07/06/2020, 17h08
yoannh21

Ok mais moi il me faut une popup js juste quand la personne a sélectionné le fichier. Pas quand le fichier est envoyé.
07/06/2020, 18h17
Toufik83
Ah d'accord, pour ça il faut attacher un événement "change" au type="file", donc toujours dans document.ready et juste après le submit, tu ajoutes ça :
Code:

1 2 3 4 $("#fichier").change(function(){ if($(this).get(0).files[0]) alert('Fichier sélectionné :'+$(this).get(0).files[0].name);//tu peux remplacer l'alerte par ce que tu veux... });

ça marche pas

la popup ne s'affiche pas quand je charge le fichier:

Code:

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" />
 
<script src="jquery-2.2.0.js"></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">
});
 
 
$("#fichier").change(function(){
    if($(this).get(0).files[0]) alert('Fichier sélectionné :'+$(this).get(0).files[0].name);//tu peux remplacer l'alerte par ce que tu veux...
});
</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>

07/06/2020, 20h01
yoannh21

oninput

C'est bon je m'en suis sorti avec un oninput.