Bonjour,

Cela fait plusieurs jours que je suis sur mon systeme d'upload d'image en ajax.

Je veux lorsque je clique sur le bouton d'upload de fichier pouvoir charger les images qui correspondent a certains criteres de poids, taille etc dans un dossier temporaire et afficher une miniature de ces images à l'issue pour avoir un retour visuel de ce qui a été chargé.

J'effectue la partie traitement dans une fonction en php.

Mon systeme semble fonctionner, cependant je fais face a un comportement bizarre. Lorsque ma fonction a chargé les images dans le dossier temporaire ma page se recharge toute seule.

Ma fonction ajax :

	// Fonction qui me fait un preview de mes images au chargement
	// Doit me charger les images dans un dossier temporaire
	// Doit afficher un retour des images qui correspondent aux criteres
$("#js_image_upload").change(function(event){
	event.preventDefault();

    var input_file 		= document.getElementById("js_image_upload");
	var file 			= input_file.files[0];
	var data 			= new FormData();
	var images 			= [];
    var nbr_of_file 	= input_file.files.length;
    
    for(var i=0;i<nbr_of_file;i++){
		data.append('images[]', input_file.files[i]);
     }

    $.ajax({
		url: "http://localhost:8890/app/project/index.php/administration_question/ajax_preview_image",
		type: 'POST',
		async : true,
		contentType:false,
		processData: false,
		cache:false,
		data: data,
		beforeSend:function(){
			$('#img_loader').html("UPLOAD ..."); // Mettre un loader !!!
		},
		success: function(response){
			$('#img_loader').empty();
			$('#img_preview').empty();
			response = $.parseJSON(response);
			$nbr_of_valid_image = Object.keys(response['valid_preview_html']).length;
			for(var i=0; i < $nbr_of_valid_image; i++){
				$('#image_preview').append(response['html_valid'][i]);
			}
		},
		complete : function(){

		},
		error: function (request, status, error) {
	        $('#debug').html(request.responseText);
	    }
	});
});

Ma partie html :

<div id="image">
   	<label for="image">Image </label>
   	<input type="file" name="images[]" id="js_image_upload" multiple="multiple"/>
   
   <div id="img_loader"></div>
   <div id="image_preview">
   		
   </div>
</div>

Je peux poster la partie traitement et upload en php si vous voulez mais je ne pense pas que ce soit necessaire ?

EDIT : Le probleme de rechargement ne survient pas tous le temps. J'ai l'impression que si le dossier tmp est vide et que j'upload ca fonctionne , mais si des images existent deja dedans et qu'il supprime les anciennes images pour uploader les nouvelles cela recharge la page de temps en temps...

Mon fichier php :

function ajax_preview_image(){

	$json = [];
	sleep(3);

	if(isset($_FILES['images']) && !empty($_FILES['images'])){

		// Configuration
		define('KB', 1024);
		define('MB', 1048576);
		define('GB', 1073741824);
		define('TB', 1099511627776);
		$folder     			= 'asset/img/tmp/';
    	$allowed_types 			= 'jpg|jpeg|png|JPG|PNG|JPEG';
        $max_size     			= 1*MB;
        $max_filename  			= '255';
		$files 					= $_FILES;
		$count_files_selected 	= count($files['images']['name']);
		
		Dossier::create_folder($folder); // Je creer le dossier temporaire si il n'existe pas
	    Dossier::supprimer_all_fichier($folder); // Je le vide pour remplir un dossier neuf

		// Je change la structure du tableau $_FILES pour etre plus propre
	    $array_img = $files['images'];

	    function clear_image_name($image_name){
	    	$path_parts = pathinfo($image_name);
    		$filename = $path_parts['filename'];
    		$extension = $path_parts['extension'];
    		$string = str_replace(' ', '-', $filename); 
			$filename = preg_replace('/[^A-Za-z0-9\-]/', '', $string);
			$image_name_clear = $filename.'.'.$extension;
			return $image_name_clear;
	    }

		$new_array_img = [];
		foreach ($array_img as $key => $element) {
			foreach ($element as $j => $sub_element) {
				$new_array_img[$j][$key] 				= $sub_element;
				$new_array_img[$j]['upload_statut']	 	= false;
				$new_array_img[$j]['messages_error']	= null;

				// Nettoyage du nom de l'image					
				$new_array_img[$j]['name']				= clear_image_name($new_array_img[$j]['name']);
			}
		}

		// Je fais mes verifications sur toutes les images postées pour faire le tri et updater le tableau new_array_img
		for($i=0; $i<$count_files_selected; $i++){ 
	    	$path_parts = pathinfo($new_array_img[$i]['name']);
	    	$name_image = $path_parts['filename'];
	    	$extension_image = $path_parts['extension'];
			$valid_max_size 		= false;
			$valid_max_filename 	= false;
			$valid_allowed_types 	= false;

			// TAILLE
	    	if($new_array_img[$i]['size'] <= $max_size){
	    		$valid_max_size = true;
	    	}
	    	else{
	    		$error = array('size'=>'image trop lourde');
	    		$new_array_img[$i]['messages_error']	= $error;
	    	}
	    	// LONGUEUR NOM
	    	if(strlen($name_image) <= $max_filename){
	    		$valid_max_filename = true;
	    	}
	    	else{
	    		$error = array('name'=>'Nom trop long');
	    		$new_array_img[$i]['messages_error']	= $error;
	    	}
	    	// EXTENSION
	    	$allowed_types_array =  explode("|", $allowed_types);
			if(in_array($extension_image, $allowed_types_array)){
			    $valid_allowed_types = true;
			}
			else{
	    		$error = array('extension'=>'Extension non prise en compte');
	    		$new_array_img[$i]['messages_error']	= $error;
	    	}
	    	// VALIDATION
	    	if($valid_max_size == true && $valid_max_filename == true && $valid_allowed_types == true){
	    		$new_array_img[$i]['upload_statut']	 = true;
	    	}
	    }

		function removeElementWithValue($array, $key, $value){
		     foreach($array as $subKey => $subArray){
		          if($subArray[$key] == $value){
		               unset($array[$subKey]);
		          }
		     }
		     return $array;
		}

		// Je creer un tableau avec les reponses qui n'ont pas l'upload statut a false
		$valid_array = [];
		$unset_array_valid = removeElementWithValue($new_array_img, "upload_statut", false); 
		$valid_array = array_values($unset_array_valid); // Je reindexe le tableau car j'ai supprimer des valeurs

		// Je creer un tableau avec les reponses qui n'ont pas l'upload statut a true
		$false_array = [];
		$unset_array_false = removeElementWithValue($new_array_img, "upload_statut", true); 
		$false_array = array_values($unset_array_false); // Je reindexe le tableau car j'ai supprimer des valeurs

		// Je fais une boucle de mon tableau valid_array pour uploader les images
	    foreach($valid_array as $valid_img){           
	    	$_FILES = []; // J'initialise le $_FILES qui va etre transmis pour l'upload
	    	$_FILES['images'] = $valid_img;

	    	$config = array(
	            'upload_path'   => $folder,
	            'allowed_types' => $allowed_types,
	           	'encrypt_name'  => FALSE,
	           	'max_size'		=> $max_size,
	            'overwrite'     => TRUE,
	            'max_filename'  => $max_filename,
	        );

	    	// j'effectue l'upload
	        $this->load->library('upload',$config);
	        $this->upload->initialize($config);
			$this->upload->do_upload('images');
    	}

    	// Je renvoie les donnees pour afficher les miniatures. Je dois les comparer au dossier d'upload pour verifier que tous est uploader
		$exclude_folders = array('..', '.', 'min','error');// fichier qui apparaissent lors d'un scandir et a exclure
		$json['image_uploaded_folder'] = array_values(array_diff(scandir($folder), $exclude_folders));

		$i = 0;
		foreach($valid_array as $valid_img){
	    	$json['valid_preview_html'][$i]['name'] = '<div>'.$valid_img['name'].'</div>';

			if (in_array($valid_img['name'], $json['image_uploaded_folder'])){
				$json['valid_preview_html'][$i]['message'] = '<div>Statut : Uploader </div>';
				$json['valid_preview_html'][$i]['miniature'] = '<img src="'.Image::crop($folder.$valid_img['name'],150,150).'" >';
			}
			else{
				$json['valid_preview_html'][$i]['message'] = "Une erreur s'est produite, veuillez recommencer";
				$json['valid_preview_html'][$i]['miniature'] = '<div> Erreur </div>';
			}

			$html_preview = '';
			$html_preview .= '	<div class="image_preview">
									<div class="img_preview">'.$json['valid_preview_html'][$i]['miniature'].'</div>
					       			<div class="column_2">
					       				<div class="img_name" >'.$json['valid_preview_html'][$i]['name'].'</div>
					       				<div class="img_message">'.$json['valid_preview_html'][$i]['message'].'</div>
					       			</div>
				       			</div>';
			$json['html_valid'][$i] = $html_preview;
			$i++;
		}

		$json['false'] = $false_array;
	    $json['new_array_img'] = $new_array_img;
	    echo json_encode($json);
	}
}

-
Edité par xenos92 8 septembre 2018 à 15:57:49

Je relance mon sujet car je suis toujours bloqué et je ne vois pas ce qui cause cela.

Des fois je vais uploader une seule image mais dans la foulée ca va faire un rechargement de ma page et des fois je relance la meme image et tous ce passe correctement.

Ce qui me pousse a croire que cela ne vient pas de mon code mais ... ou regarder ?