change vs submit

**Fredy007** · 02/02/2018, 19h03

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

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

**psychadelic** · 02/02/2018, 23h32

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() {

**Fredy007** · 03/02/2018, 17h51

Bonjour psychadelic,

Malgrès que je supprime le code :

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

**psychadelic** · 03/02/2018, 18h37

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

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

**Fredy007** · 03/02/2018, 19h00

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

**psychadelic** · 03/02/2018, 22h29

simple....

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

**Fredy007** · 04/02/2018, 00h08

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

change vs submit

jQuery

Vue hybride

Discussions similaires

Partager

Partager