Télécharger fichier PDF avec AJAX

**ciolvic** · 16/12/2020, 15h38

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 :

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
			$(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 HTML :

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

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 php :

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

**Toufik83** · 16/12/2020, 16h58

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 :

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
 
$('#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.

**ciolvic** · 16/12/2020, 19h51

Merci de la réponse si rapide, par contre je pense que je vais changer de plan

.

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

Code :

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

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 :

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

$('#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

**Toufik83** · 16/12/2020, 20h18

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.

**ciolvic** · 16/12/2020, 20h35

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

Code :

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

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 :

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

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

**Toufik83** · 16/12/2020, 21h02

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 :

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

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

**ciolvic** · 16/12/2020, 21h11

avec le code injecté j'ai un undefined.

Pourquoi ai-je ce type de retour ?

Pourtant mon dev est comme ce qui suit :

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
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 HTML :

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

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

**Toufik83** · 16/12/2020, 21h59

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 html :

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

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 :

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
 
$('#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 "#"

**ciolvic** · 16/12/2020, 22h47

C'est bon solution trouvé.

Merci à toi Touffik.
ça fonctionne niquel

Ciol

**ciolvic** · 19/12/2020, 15h06

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 :

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
$(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 HTML :

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

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

Télécharger fichier PDF avec AJAX [AJAX]

jQuery

Discussions similaires

Partager

Partager