Télécharger fichier PDF avec AJAX

Version imprimable

Bonjour,

Je suis bloqué depuis ce matin sur un problème d'envoi de fichier sur une validation AJAX.
Sachant que dans mon fichier php de traitement il ne voit pas ce que je lui envoie, je trouve ça assez bizarre.
Voici le code :
Ci-dessous la requête ajax avec le code HTML.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
			$(document).ready(function() {	
				$('#bouton_form').click(function() {
					// Check file selected or not
					$.ajax({
						url: 'squelettes-melanie/lib/upload_file.php',
						type: 'post',
						dataType : "JSON",
						data : $('#formulaire').serialize(),
						enctype: 'multipart/form-data',
						success: function(data){alert(data.message);},
						error : function(request, status, error) {
							alert(request.responseText);
						}
						//}
					});
				});

Code:

1
2
3
4
5
6
7
8
9
<form name="formulaire" id="formullaire" method="POST" action="<?php echo $url;?>" enctype="multipart/form-data" >
.........
<div id="contactLine">
            <div class="intitule"></div>
                <div class="result"> 
                    <input type="file" name="identite" value="" placeholder="Fichier .pdf" accept="application/pdf" id="identite" onchange="picture_id();"/>
                </div>
            <div class="intitule"></div>
        </div>

Fichier php :

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
44
header("Access-Control-Allow-Origin: *");
// echo "ok";
try {
	//print_r($_FILES);
	// DIE('yep');
    $id = "[RANDOM_GENERATED_GUID]";
 
    $targetDir = "squelettes-melanie/lib/pdf/images/identites/";
    if (!is_dir($targetDir)) {
        if (!mkdir($targetDir, 0777, true)) {
            throw new Exception("Unable to upload your document. We were unable to create the required directories");
        }
    }
 
    $targetFile = $targetDir . $id . ".pdf";
    $fileType = pathinfo($targetFile, PATHINFO_EXTENSION);
 
    if (file_exists($targetFile)) {
        throw new Exception("Unable to upload your document. The file already exists");
    }
 
    if ($_FILES["#identite"]["size"] > 2000000) {
        throw new Exception("Unable to upload your document. The file is to large (Maximum of 2MB)");
    }
 
    if ($fileType != "pdf") {
        throw new Exception("Unable to upload your document. Only PDF documents can be uploaded");
    }
 
    if (!move_uploaded_file($_FILES["#identite"]["tmp_name"], $targetFile)) {
        //Keeps failing here with error code 0
        throw new Exception("Unable to upload your document. There was an error uploading the file");
    }
 
    echo json_encode(array(
        "error" => false,
        "message" => "Your document was successfully uploaded"
    ));
} catch (Exception $ex) {
    echo json_encode(array(
        "error" => true,
        "message" => $ex->getMessage()
    ));
}

Voilà et en fait il n'arrive pas à récupérer le fichier nommé identite.

Si vous avez une idée.
Merci à vous.
Ciol

Bonjour,

Pour télécharger les fichiers au serveur, tu dois utiliser 2 paramètres d'ajax, contentType et processData et les initialiser à false + l'objet FormData():

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
$('#bouton_form').click(function() {
   let fd=new FormData($("#idForm").get(0));//on stocke toutes les valeurs du formulaire dans formdata
    $.ajax({
       url: 'squelettes-melanie/lib/upload_file.php',
       type: 'post',
       dataType : "json",
       contentType:false,
       processData:false,
       data : fd,//ici tu envois le formdata au serveur
       enctype: 'multipart/form-data'
   })
   .done(function(data){
       /* code succès ici ...*/
    })
   .fail(function(err){
     /*code erreur ici ...*/
    });
});

Il faut remplacer les callback error et success par done et fail, car c'est dépréciés dans les versions récentes de jQuery.

16/12/2020, 19h51
ciolvic
Merci de la réponse si rapide, par contre je pense que je vais changer de plan :D.

Je passe finalement sur un appel ajax avec la méthode post comme ça :
Code:

1 2 3 4 5 var url = 'squelettes-melanie/lib/upload_file.php'; $.post(url, function(data){ $('#identite').html(data); });
Par contre je n'arrive toujours pas à passer mon info sur mon image. Comment faire pour bien tourner la chose.
Sachant que normalement je passe bien le bon id à savoir :

Code:

$('#identite').html(data);

Par contre il ne passe strictement rien...
je vais encore chercher mais je trouve ça bizarre.

Pas vous.
Merci de votre aide.
Ciol
16/12/2020, 20h18
Toufik83

Bonjour,
Ajax a plus d'options que $.post et ça ne fonctionnera pas..puis le retour php est du json et .html(data) n'a aucun sens.
Remets Ajax et ajoutes un console.log(data) dans done pour visualiser ce que tu reçois et regardes ce que ça donne dans l'onglet console de l'outils de développement du navigateur, et une alerte dans fail pour voir s'il y a des erreurs.

Je pense que le problème vient de la version du jquery utilisé.
il m'informe qu'il y a :
Code:

1 2 Unexpected token < in JSON at position 0
à la version du jquery est la 1.7.2

Sachant qu'à la place du .done et .fail j'ai mis.
Code:

1 2 3 4 5 6 7 8 9 10 .done(function(data){ console.log(data); /* code succès ici ...*/ }) .fail(function(jqXHR, textStatus, error) { //console.log(someString); console.log(error); /*code erreur ici ...*/ });
Ciol

16/12/2020, 21h02
Toufik83
Le message indique que le retour n'est pas correctement formaté en json, et ce console est celui de fail et pas de done, certainement parce qu'il y'a une erreur dans le fichier php..

Tout d'abord, commence par modifier dataType:"JSON", en dataType:"json", "json" en minuscule et pas majuscule.

Après, pour visualiser le message d'erreur, il faut le récupérer comme suite :
Code:

1 2 3 4 5 .fail(function(jqXHR, textStatus, error) { //console.log(someString); console.log("Erreur ajax :"+error.responseText); // c'est enregistré dans responseText });

avec le code injecté j'ai un undefined.

Pourquoi ai-je ce type de retour ?

Pourtant mon dev est comme ce qui suit :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var form = $("#formulaires").get(0); // You need to use standard javascript object here
					var formData = new FormData(form);
					formData.append('image', $('input[type=file]')[0].files[0]); 
					$.ajax({
					   url: 'squelettes-melanie/lib/upload_file.php',
					   type: 'post',
					   dataType : "JSON",
					   contentType:false,
					   processData:false,
					   data : formData,//ici tu envois le formdata au serveur
					   enctype: 'multipart/form-data'
				   })
				   .done(function(data){
						 console.log(data);
					   /* code succès ici ...*/
					})
				   .fail(function(jqXHR, textStatus, error) {
					//console.log(someString);
						console.log("Erreur ajax :"+error.responseText);
					 /*code erreur ici ...*/
					});

Code:

1
2
3
4
5
6
7
8
9
<form name="formulaire" id="formulaires" method="POST" action="<?php echo $url;?>" enctype="multipart/form-data" >
........
<div id="contactLine">
            <div class="intitule"></div>
                <div class="result"> 
                    <input type="file" name="identite" value="" placeholder="Fichier .pdf" accept="application/pdf" id="identite" onchange="picture_id();"/>
                </div>
            <div class="intitule"></div>
        </div>

et après pour le php c'est le même.

Merci à vous.
Ciol

Bonjour,

"JSON" est toujours en majuscule, tu ne l'as pas remis en minuscule et ils y'a encore des choses à modifier dans le code soit en php ou en html.

Ajouter un button de type submit dans le form et l'attacher à un écouteur d'événement submit

Code:

1
2
3
4
5
 
<form name="formulaire" id="formulaires" method="POST" action="<?php echo $url;?>" enctype="multipart/form-data" >
.........
<input type="submit" value="Envoyer" />
</form>

Remplacer "click" par "submit" dans le code jQuery

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
$('#formulaires').submit(function(e) {
   e.preventDefault();//empêcher le rechargement de page
   let fd=new FormData($(this).get(0));//on stocke toutes les valeurs du formulaire dans formdata
    $.ajax({
       url: 'squelettes-melanie/lib/upload_file.php',
       type: 'post',
       dataType : "json",
       contentType:false,
       processData:false,
       data : fd,//ici tu envois le formdata au serveur
       enctype: 'multipart/form-data'
   })
   .done(function(data){
      console.log("Ajax done :",data);
    })
   .fail(function(err){
      console.log("Ajax erreur :"+err.responseText);
    });
});

Côté php, Supprimer le diez "#" dans $_FILES["#identite"] car le name de l'input ne contient pas de "#"

16/12/2020, 22h47
ciolvic

C'est bon solution trouvé.

Merci à toi Touffik.
ça fonctionne niquel :D

Ciol

Bonjour,
je suis bloqué dans le passage dans la requête ajax. Pourtant tout est bien fait mais je ne vois pas où bloque la chose.

voici ma requête :

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
$(document).ready(function() {	
				$('#bouton_form').click(function() {
				   // e.preventDefault();//empêcher le rechargement de page
				   var fd=new FormData($("#formulaires").get(0));//on stocke toutes les valeurs du formulaire dans formdata
					// var form = $("#formulaires").get(0); // You need to use standard javascript object here
					// var formData = new FormData(form);
					//formData.append('image', $('input[type=file]')[0].files[0]); 
					// console.log(formData.values());
					$.ajax({
					   url: 'squelettes-melanie/lib/upload_file.php',
					   type: 'post',
					   dataType : "json",
					   contentType:false,
					   processData:false,
					   data :  fd,//ici tu envois le formdata au serveur
					   enctype: 'multipart/form-data'
				   })
				   .done(function(data){
						 console.log("Ajax done" + data);
					   /* code succès ici ...*/
					})
				   .fail(function(jqXHR, textStatus, error) {
					//console.log(someString);
						console.log("Ajax Erreur :"+error.responseText);
					 /*code erreur ici ...*/
					});
				});

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<form name="formulaire" id="formulaires" method="POST" action="<?php echo $url;?>" enctype="multipart/form-data" >
......
<div id="contactLine">
            <div class="intitule"></div>
                <div class="result"> 
                    <input type="file" name="identite" value="" placeholder="Fichier .pdf" accept="application/pdf" id="identite" onchange="picture_id();"/>
                </div>
            <div class="intitule"></div>
.......
'<div class="floatRight" align="center">'.
                        '<div class="bouton_form_1" id="bouton_form" onClick="verifier_form_validation();" > Valider </div>'.
                    '</div>'.

Est-ce que vous voyez là où j'aurais omettre une erreur ?

Merci à vous.
Ciol