change vs submit

Version imprimable

change vs submit

Bonjour,

Quand j'utilise "submit" pour upload des fichiers, j'obtiens le tableau $_FILES, par contre "change", j'obtiens un tableau vide.

Je voudrais récupérer les données du fichier ainsi que les valeurs au formulaire afin de les traiter sur un fichier nommé ajax_php_file:

Voici la source du code, je change seulement submit par change:

upload1.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
<html>
    <head>
		<meta name="robots" content="noindex, nofollow">
        <title>Ajax Image Upload Using PHP and jQuery</title>
        <link rel="stylesheet" href="http://www.aorank.com/tutorial/Live_demo_ajax_upload_image/style.css" />
		<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="upload1.js"></script>
 
    </head>
    <body> 
		<div class="main">
        <h1>Ajax Image Upload</h1><br/>
		<hr>
            <form id="uploadimage" action="" method="post" enctype="multipart/form-data">
				<div id="image_preview"><img id="previewing" src="http://www.aorank.com/tutorial/Live_demo_ajax_upload_image/noimage.png" /></div>	
        <hr id="line">    
			<div id="selectImage">
				<label>Select Your Image</label><br/>
                <input type="file" name="file" id="file" required />
				<input type="submit" value="Upload" class="submit" />
            </div>                   
			</form>		
		</div> 
		<h4 id='loading' ><img src="http://www.aorank.com/tutorial/Live_demo_ajax_upload_image/loading_circle.gif"/>&nbsp;&nbsp;Loading...</h4>
		<div id="message"> 			
        </div>
      </body>
</html>

upload1.js:

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
45
46
47
48
49
50
51
52
53
$(document).ready(function (e) {
	$('#file').on('change', (function(e) {
		e.preventDefault();
 
                var dt = new FormData(this);
                console.log(dt);
 
		$("#message").empty(); 
		$('#loading').show();
		$.ajax({
        	url: "ajax_php_file.php",   	// Url to which the request is send
			type: "POST",      				// Type of request to be send, called as method
			data:  new FormData(this), 		// Data sent to server, a set of key/value pairs representing form fields and values 
			contentType: false,       		// The content type used when sending data to the server. Default is: "application/x-www-form-urlencoded"
    	    cache: false,					// To unable request pages to be cached
			processData:false,  			// To send DOMDocument or non processed data file it is set to false (i.e. data should not be in the form of string)
			success: function(data)  		// A function to be called if request succeeds
		    {
			$('#loading').hide();
			$("#message").html(data);			
		    }	        
	   });
	}));
 
// Function to preview image
	$(function() {
        $("#file").change(function() {
			$("#message").empty();         // To remove the previous error message
			var file = this.files[0];
			var imagefile = file.type;
			var match= ["image/jpeg","image/png","image/jpg"];	
			if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
			{
			$('#previewing').attr('src','noimage.png');
			$("#message").html("<p id='error'>Please Select A valid Image File</p>"+"<h4>Note</h4>"+"<span id='error_message'>Only jpeg, jpg and png Images type allowed</span>");
			return false;
			}
            else
			{
                var reader = new FileReader();	
                reader.onload = imageIsLoaded;
                reader.readAsDataURL(this.files[0]);
            }		
        });
    });
	function imageIsLoaded(e) { 
		$("#file").css("color","green");
        $('#image_preview').css("display", "block");
        $('#previewing').attr('src', e.target.result);
		$('#previewing').attr('width', '250px');
		$('#previewing').attr('height', '230px');
	};
});

ajax_php_file.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
<?php
 
print_r($_FILES);
 
 
if(isset($_FILES["file"]["type"]))
{
$validextensions = array("jpeg", "jpg", "png");
$temporary = explode(".", $_FILES["file"]["name"]);
$file_extension = end($temporary);
if ((($_FILES["file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/jpeg")
) && ($_FILES["file"]["size"] < 1000000000)//Approx. 100kb files can be uploaded.
&& in_array($file_extension, $validextensions)) {
if ($_FILES["file"]["error"] > 0)
{
echo "Return Code: " . $_FILES["file"]["error"] . "<br/><br/>";
}
else
{
if (file_exists("upload/" . $_FILES["file"]["name"])) {
echo $_FILES["file"]["name"] . " <span id='invalid'><b>already exists.</b></span> ";
}
else
{
$sourcePath = $_FILES['file']['tmp_name']; // Storing source path of the file in a variable
$targetPath = "upload/".$_FILES['file']['name']; // Target path where file is to be stored
$move = move_uploaded_file($sourcePath,$targetPath) ; // Moving Uploaded file
echo 'move '.$move.'<br>';
echo "<span id='success'>Image Uploaded Successfully...!!</span><br/>";
echo "<br/><b>File Name:</b> " . $_FILES["file"]["name"] . "<br>";
echo "<b>Type:</b> " . $_FILES["file"]["type"] . "<br>";
echo "<b>Size:</b> " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
echo "<b>Temp file:</b> " . $_FILES["file"]["tmp_name"] . "<br>";
}
}
}
else
{
echo "<span id='invalid'>***Invalid file Size or Type***<span>";
}
}
?>

Merci a vous

02/02/2018, 23h32
psychadelic

Comprends pas ton truc...
tu essaye d'uploader un fichier local avec une commande Ajax ???

sinon dans ton code tu affecte 2 fois un evt change sur le meme objet, c'est pas trop normal... ?

upload1.js:
ligne 2 => $('#file').on('change', (function(e) {.

et ligne 27 => $("#file").change(function() {

Bonjour psychadelic,

Malgrès que je supprime le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Function to preview image
	/*$(function() {
        $("#file").change(function() {
			$("#message").empty();         // To remove the previous error message
			var file = this.files[0];
			var imagefile = file.type;
			var match= ["image/jpeg","image/png","image/jpg"];	
			if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
			{
			$('#previewing').attr('src','noimage.png');
			$("#message").html("<p id='error'>Please Select A valid Image File</p>"+"<h4>Note</h4>"+"<span id='error_message'>Only jpeg, jpg and png Images type allowed</span>");
			return false;
			}
            else
			{
                var reader = new FileReader();	
                reader.onload = imageIsLoaded;
                reader.readAsDataURL(this.files[0]);
            }		
        });
    });*/

Je reçois toujours la même erreur

03/02/2018, 18h37
psychadelic

c'est bien d'avoir enlevé le code superflu
mais cela ne change rien à l'affaire :

Citation:

Envoyé par psychadelic

Comprends pas ton truc...
tu essaye d'uploader un fichier local avec une commande Ajax ???

une commande ajax n'enverra jamais un fichier sur un serveur, en tout cas pas en l'état de ton code

=> data: new FormData(this), envoie juste ce qu'il y a d'écrit dans ton formulaire cad juste le nom du fichier, pas son contenu

il y a un mécanisme direct pour uploader un fichier local vers un serveur, => http://antoine-herault.developpez.co...ls/php/upload/

Je n'arrive pas à comprendre ce que tu veux faire.
Si tu veux juste lire un fichier en local en utilisant du Javascript pour l'afficher sur ta page locale, c'est un autre mécanisme mais qui n'utilise pas du Ajax non plus.

Donc vraiment ce que tu cherche à tripatouiller en Ajax n'a aucun sens, et je ne comprends pas ce qu tu cherche à faire...
03/02/2018, 19h00
Fredy007

Je ne cherche pas à uploder le fichier en premier temps, mais tout d'abord de traiter les données du ficher (taille, nom, ...)

simple....
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 <!doctype html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>test file API</title> </head> <body> choisir un fichier ... <input type="file" id="myFile" /> <script> var myFile = document.getElementById('myFile'); myFile.addEventListener('change', function() { console.log('name ........= ' + this.files[0].name ); console.log('lastModified.= ' + this.files[0].lastModified ); console.log('size.........= ' + this.files[0].size ); console.log('type.........= ' + this.files[0].type ); }); </script> </body> </html>
faut juste que le file API soit possible sur le navigateur => https://caniuse.com/#search=file%20api

sinon, ce ne sera pas possible.

mais sinon, je ne comprends toujours pas ce que tu cherche à faire au bout du compte, ni pourquoi tu fuis cette question.
C'est un gros gros secret d'état ???

dans ton premier code "effacé" j'ai l'impression que tu cherches à utiliser la "file API" mais dans une manipulation jQuery, alors que justement jQuery n’intègre pas cette API.
On ne peut utiliser cette API uniquement en JavaScript "direct", sauf si tu veux intégrer toi même dans une extension jQuery.

04/02/2018, 00h08
Fredy007

Ce que je cherche est simple:

- Un control coté client avec jQuery (c'est bon ça marche),

- Un control coté serveur avec du PHP, mais en meme temps avec l'action on change et non pas on submit, le script récupere les donnees du tableau $_FILES avec submit, par contre avec change, il me retourne un tableau vide

- 3eme et derniere etape, quand les 2 etapes precedentes marchent bien, je procure au chargement du fichier sur le serveur avec move_uploaded_file

Merci a vous
04/02/2018, 00h40
psychadelic

Citation:

Envoyé par Fredy007

- Un control coté serveur avec du PHP, mais en meme temps avec l'action on change et non pas on submit, le script récupere les donnees du tableau $_FILES avec submit, par contre avec change, il me retourne un tableau vide

Pourrais-tu reformuler ta phrase avec une meilleure ponctuation car je ne comprends pas bien ce que tu désires faire ?

Le seul moyen d’envoyer un fichier local vers un serveur c’est d’utiliser un submit de formulaire.

À la limite tu peux déclencher un "submit" via un onChange en js/ Jquery ( ex*: $("#idFormulaire").submit(); )

Citation:

- Un control coté serveur avec du PHP, mais en même temps avec l'action on change et non pas on submit,

si tu es coté serveur tu es en php, donc pas en js/sQuery, un script php ne peut pas récupérer un event sur un post client, il ne reçoit que des requêtes.

Citation:

le script récupère les données du tableau $_FILES avec submit, par contre avec change, il me retourne un tableau vide

le script javascript*"pur" ou ça*?
Ton script est en jQuery, pas en js et il essaie de récupérer une info qui n’existe pas dans les fonctionnalitées de jQuery.

l’exemple que je t’ai donné avec un event «*change*» le fait tres bien, il es en js "pur"

Ou alors tu parles d’un script PHP*?
Mais ton script jquery envoie une requete AJAX, qui ne peux pas envoyer un fichier et encore moins des informations sur un ou des fichiers sélectionné puisque tu utilise du jQuery pour avoir des infos sur tes fichiers et que jQuery n’est pas conçu pour ça.
04/02/2018, 00h53
psychadelic

Bon je vais essayer de reformuler plus clairement ce qu’il me semble être ce que tu recherche à faire.

Tu cherche à uploader un fichier sur ton serveur.

Les fichiers acceptables au téléchargement doivent être de type ".jpg" ou ".jpeg" ou ".png" et ne doivent pas excéder la taille de 100kb.

c’est bien ça ?

Citation:

Envoyé par psychadelic

Le seul moyen d’envoyer un fichier local vers un serveur c’est d’utiliser un submit de formulaire.

je pense qu'on peut le faire via "change" aussi :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$('#file').change(function(){
	var _this=$(this),file=_this[0].files
	,formData=new FormData();
	console.log('file :'+JSON.stringify(file));
	for(i=0;i<file.length;i++){//pour une sélection multiple.
	  formData.append('fichier',file[i]);
	}
	$.ajax({
             url: "sendfile.php", 
             method: "post",
	     dataType:'json',
              data: formData,
             contentType: false,
             processData: false,
              success: function (data) {
			console.log(JSON.stringify(data));
              },
              error: function (error) { 
                       alert("Error :"+error.responseText); 
              }
          });
 
});

sendfile.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
$reponse=[]; 
if(sizeof($_FILES)>0){
	$nom=$_FILES['fichier']['name'];
	$tmp_name=$_FILES['fichier']['tmp_name'];
	$size=$_FILES['fichier']['size'];
	$type=$_FILES['fichier']['type'];
	$reponse=['nom'=>$nom,'type'=>$type,'size'=>$size,'tmp_name'=>$tmp_name];
}
else {
	$reponse['erreur']='aucun fichier sélectionné.';
}
echo json_encode($reponse);
?>

04/02/2018, 13h45
Fredy007

Oui effectivement Toufik83, c'est ce qu'il me faut, j'ai beau cherché et j'ai trouvé qu'il me faut 3 parametres de plus:

- formData.append,
- contentType: false,
- processData: false.

La premiere je l'ai bien compris (ajouté les elements du fichiers $_FILES) <= c'est là où ma question tourne, les 2 derniers, je ne les ai pas compris contentType et processData
04/02/2018, 13h52
Toufik83

est ce que tu as lu La documentation d'ajax?
ils expliquent chaque paramètre de la fonction ajax.
04/02/2018, 16h00
NoSmoking

Bonjour,
il existe même un plugin : jQuery File Upload Plugin avec une démo en live.

Sinon il y a ABCIWEB qui a « commis » Outil d'upload AJAX-PHP, excellent au passage.
06/02/2018, 06h01
ABCIWEB

Et sur le principe c'est pas terrible de faire un upload on change. A quoi sert ton image de preview dans ces conditions ? Si on s'aperçoit que ce n'est pas le bon fichier c'est déjà trop tard, l'image est envoyée automatiquement :aie:

Aussi l'image de preview gagnerait à être dimensionnée proportionnellement à ses dimensions...
06/02/2018, 11h26
Fredy007

Citation:

Envoyé par Toufik83

est ce que tu as lu La documentation d'ajax?
ils expliquent chaque paramètre de la fonction ajax.

Merci à vous

Citation:

Envoyé par NoSmoking

Bonjour,
il existe même un plugin : jQuery File Upload Plugin avec une démo en live.

Sinon il y a ABCIWEB qui a « commis » Outil d'upload AJAX-PHP, excellent au passage.

Je me suis inspiré un peu du tuto

Citation:

Envoyé par ABCIWEB

Et sur le principe c'est pas terrible de faire un upload on change. A quoi sert ton image de preview dans ces conditions ? Si on s'aperçoit que ce n'est pas le bon fichier c'est déjà trop tard, l'image est envoyée automatiquement :aie:

Aussi l'image de preview gagnerait à être dimensionnée proportionnellement à ses dimensions...

J'ai ajouté un boutton d'annulation de l'upload si le fichier n'est pas correct.

Merci a vous tous
06/02/2018, 15h02
psychadelic

Citation:

Envoyé par ABCIWEB

Et sur le principe c'est pas terrible de faire un upload on change. A quoi sert ton image de preview dans ces conditions ? Si on s'aperçoit que ce n'est pas le bon fichier c'est déjà trop tard, l'image est envoyée automatiquement :aie:

bien d'accord, surtout qu'avec cette logique le fichier est recopié 2 fois.
la première fois au sein du navigateur
la seconde fois par l'envoi en Ajax

Alors qu'il serait plus simple de vérifier avant tout traitement si le fichier ne dépasse pas les 100kb et qu'il est d'un type acceptable, pour ensuite lancer par un submit commandé en JavaScript pour que navigateur se charge de traiter l'upload.

Tant qu'a faire pourquoi , pour la première partie, ne pas chargement du fichier par un fetch tant qu'on y est ??? :roll:
https://developer.mozilla.org/fr/doc...balFetch/fetch

Avec votre méthode si un utilisateur envoie un pdf de 10 Gb,
qui mettra des plombes a se télécharger 2 fois qui non seulement bloquera toute la machine mais qui, en plus, risque fort de faire planter le navigateur - parce je doute que ça rentrera pas dans le bac à sable alloué à chaque session de navigation, bref une machine à gaz et c'est tout sauf une solution. :scarymov:
07/02/2018, 01h03
ABCIWEB

Citation:

Envoyé par psychadelic

bien d'accord, surtout qu'avec cette logique le fichier est recopié 2 fois.
la première fois au sein du navigateur
la seconde fois par l'envoi en Ajax

Pour le navigateur cela ne prend pas de ressources, si tu sélectionnes un fichier vidéo de 1Go, la mémoire utilisée reste stable et n'augmente pas d'1 Go, heureusement. Le navigateur ne sélectionne qu'un lien vers la ressource. Par contre il en consomme un peu quand il s'agit de faire afficher des vignettes de prévisualisation car dans ce cas il faut lire les fichiers image.

Citation:

Envoyé par psychadelic

Alors qu'il serait plus simple de vérifier avant tout traitement si le fichier ne dépasse pas les 100kb et qu'il est d'un type acceptable, pour ensuite lancer par un submit commandé en JavaScript pour que navigateur se charge de traiter l'upload.

Il y a différentes manières de procéder. Il vaut mieux ne pas partir sur ce principe de commander le bouton submit par javascript en fonction de la nature des fichiers, car en cas d'upload multiple cela condamnerait l'upload si un seul fichier n'était pas conforme. Il est plus intéressant d'interdire l'upload non pas généralement mais spécifiquement par fichier tout en informant le visiteur de pourquoi tel ou tel fichier ne sera pas téléchargé même si on appuie sur le bouton submit. C'est ce que font la plupart des classes d'upload ajax.

Cette classe d'upload ajax fonctionne sur ce principe avec l'avantage de proposer un code serveur PHP prêt à l'emploi, et donc des exemples entièrement fonctionnels. La technique de fragmentation est aussi de la partie ce qui permet également de télécharger des très gros fichiers en surpassant les limites serveur "post_max_size", "upload_max_filesize" et "max_file_uploads", ainsi que la reprise des téléchargements interrompus.

Je conseille d'utiliser une classe d'upload ajax toute faite - celle que je viens de mentionner ou une autre cf message de NoSmoking - pour ceux qui veulent avoir une solution fiable en y passant un minimum de temps. Car il y a de nombreux problèmes à traiter, souvent invisibles dans les tests, comme par exemple la gestion des erreurs fatales de php pour retourner des erreurs personnalisées et explicites vers le visiteur. Cela évite aussi d'avoir à programmer toutes les options déjà disponibles comme l'affichage graphique de la progression, le temps restant estimé, l'affichage des vignettes de prévisualisation etc.