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