Bonjour, j'ai trouver un petit script sur internet pour uploader des photos en js, j'ai réussi à obtenir le résultat attendu, il y a juste un petit soucis, 

si l'image et bien uploader le script fais un "append()" pour afficher l'image (ligne 116)

jusque la tout vas bien, sauf que j'ai crée un bouton "supprimer l'image", en cliquant dessus il modifies tout un tas de contenu et valeur, mais il fait surtout un remove() pour supprimer le append() fais auparavant, donc, en cliquant sur le bouton supprimer tout redeviens comme avant, aucune photo en ligne etc.., je choisies à nouveau l'image que je veut uploader, et la au moment de refaire un append() pour afficher l'image ça bloque, j'ai fais des essais, le code s'exécute bien, comme il faut, ont dirais qu'il ignore cette ligne (116) lors d'une second envoi .. pour le reste tout s'exécute normalement, déjà que j'ai pas un bon niveau en javascript je suis un peu paumé sur ce coup !

Merci d'avance, j'hésitais à poster le code source directement ici ou via un hebergeur, mais certains pourrais penser que c'est un virus ou autre donc je balances tout ça ici !

function img(id) // permet d'ouvrir l'input file
{
	document.getElementById("img"+id).value = 1;
}

function supp_img(id) // permet de supprimer une image poster
{
	$("#add"+id).attr('class',"fa fa-plus-circle fa-5x pointer");
	$("#add"+id).attr('style',"color:#c93634;");
	$('#nom_file'+id).attr('placeholder', 'Aucun fichier seléctionné');
	document.getElementById('add'+id).style.display = 'none';
	document.getElementById("img"+id).value = 0;
	document.getElementById("file"+id).value = "";
	document.getElementById("src_img"+id).value = "";
	document.getElementById('nom_file'+id).style.display = 'block';
	document.getElementById('add'+id).style.display = 'block';
	document.getElementById('supp_'+id).style.display = 'none';
	$('#image'+id).remove();
}

//customize values to suit your needs.
var max_file_size 		= 8048576; //maximum allowed file size
var allowed_file_types 	= ['image/png', 'image/gif', 'image/jpeg', 'image/pjpeg']; //allowed file types
var message_output_el 	= 'output'; //ID of an element for response output
var loadin_image_el 	= 'loading-img'; //ID of an loading Image element

//You may edit below this line but not necessarily
var options = { 
	dataType:  'json', //expected content type
	target: '#' + message_output_el,   // target element(s) to be updated with server response 
	beforeSubmit: before_submit,  // pre-submit callback 
	success: after_success,  // post-submit callback 
	resetForm: true        // reset the form after successful submit 
}; 

$('#upload_form').submit(function(){
	$(this).ajaxSubmit(options); //trigger ajax submit
	return false; //return false to prevent standard browser submit
}); 

function before_submit(formData, jqForm, options){
	var proceed = true;
	var error = [];
	/* validation ##iterate though each input field
	if you add extra text or email fields just add "required=true" attribute for validation. */
	$(formData).each(function(){ 
	
		//check any empty required file input
		if(this.type == "file" && this.required == true && !$.trim(this.value)){ //check empty text fields if available
			error.push( this.name + " is empty!");
			proceed = false;
		}
		
		//check any empty required text input
		if(this.type == "text" && this.required == true && !$.trim(this.value)){ //check empty text fields if available
			error.push( this.name + " is empty!");
			proceed = false;
		}
		
		//check any invalid email field
		var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
		if(this.type == "email" && !email_reg.test($.trim(this.value))){ 
			error.push( this.name + " contains invalid email!");
			proceed = false;          
		}
		
		//check invalid file types and maximum size of a file
		if(this.type == "file"){
			if(window.File && window.FileReader && window.FileList && window.Blob){
				if(this.value !== ""){
					if(allowed_file_types.indexOf(this.value.type) === -1){
						error.push( "<b>"+ this.value.type + "</b> est un format invalide !");
						proceed = false;
					}
	
					//allowed file size. (1 MB = 1048576)
					if(this.value.size > max_file_size){ 
						error.push( "<b>"+ bytes_to_size(this.value.size) + "</b> est trop gros, la taille maximale est : de " + bytes_to_size(max_file_size) + "bytes");
						proceed = false;
					}
				}
			}else{
				error.push( "Merci de mettre à jour votre navigateur internet, actuellement vous ne pouvez pas envoyer de photos sur Helpizy !");
				proceed = false;
			}
		}
		
	});	
	
	$(error).each(function(i){ //output any error to element
		$('#' + message_output_el).html('<div class="error">'+error[i]+"</div>");
	});	
	
	if(!proceed){
		return false;
	}
	
	$('#' + loadin_image_el).show();
}

//Callback function after success
function after_success(data){
	$('#' + message_output_el).html('');
	switch(data.type){ //We are expecting JSON output, hance "data" holds json data from server.
            case 'message':
				$(data.content.thumbs).each(function(i){
					var img1 = document.getElementById("img1").value;
					var img2 = document.getElementById("img2").value;
					var img3 = document.getElementById("img3").value;
					if(img1 == 1)
					{
						document.getElementById('add1').style.display = 'none';
						$('#image1').append('<span class="message"><img src="images/annonce/thumbs/'+this+'" /></span>');
						document.getElementById("img1").value = 0;
						document.getElementById("src_img1").value = this;
						document.getElementById('nom_file1').style.display = 'none';
						document.getElementById('supp_1').style.display = 'block';
					}
					
					else if(img2 == 1)
					{
						document.getElementById('add2').style.display = 'none';
						$('#image2').append('<span class="message"><img src="images/annonce/thumbs/'+this+'" /></span>');
						document.getElementById("img2").value = 0;
						document.getElementById("src_img2").value = this;
						document.getElementById('nom_file2').style.display = 'none';
						document.getElementById('supp_2').style.display = 'block';
					}
				
					else if(img3 == 1)
					{
						document.getElementById('add3').style.display = 'none';
						$('#image3').append('<span class="message"><img src="images/annonce/thumbs/'+this+'" /></span>');
						document.getElementById("img3").value = 0;
						document.getElementById("src_img3").value = this;
						document.getElementById('nom_file3').style.display = 'none';
						document.getElementById('supp_3').style.display = 'block';
					}
					
				});
				
                break;
            case 'error':
                $('#' + message_output_el).html('<div class="error">'+data.content+"</div>");
                break;
        }
	$('#' + loadin_image_el).hide();
}

//Callback function to format bites bit.ly/19yoIPO
function bytes_to_size(bytes){
   var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
   if (bytes == 0) return '0 Bytes';
   var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
   return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
}

-
Edité par florianlecoconnier 8 février 2016 à 16:34:27

Si tu remove() une div, c'est normal que tu ne puisse plus append() dedans...

Utilise plutot un $(div).html("") pour vider le contenu de la div.

Merci beaucoup ! Tu pourrais juste m'expliquer ou me rediriger vers un site qui dis exactement pourquoi ont ne peut pas ré-utiliser append() après avoir fait un remove ?

J'y connais rien donc autant me documenter

Merci encore !

Je me permet juste de poser une autre question, si personne répond c'est pas grave mais bon ..

J'ai plusieurs images de test sur mon pc pour uploader les images, j'ai rencontrer aucun soucis, mais la par exemple pour je ne sais quelle raison, ça ne veut pas marcher, ça ne retourne aucune erreur, le fichier et pourtant du même format (jpg ou png), environ la même taille (100px x 100px) et ça passes pas .. 

C'est simple, imagine que ton DOM contienne :

<div id="contenu">Texte</div>

si tu fais un 

$('#contenu').remove()

Cette ligne disparaîtra et il te sera impossible de la rappeler avec un $('#contenu').append() puisque cette div n'existera plus...

Par contre si tu fais un $('#contenu').html('Nouveau Contenu')

la ligne deviendra :

<div id="contenu">Nouveau Contenu</div>
 

Ha d'accord, mais pourtant j'avais fais un essaie avec remove, et le truc c'est quand inspectant la source de la page j'avais toujours <div id="..."></div> c'est pour ça que je pensais avoir bien fais au début .. en tout cas merci pour l'explication, je supposes que je dois recrée un nouveau sujet pour mon autre problème

Merci énormément 

Oui ouvre un autre sujet, mais tu sais récupérer des script sur internet et demander au autres pourquoi ça marche pas pour ton utilisation ne t'aidera pas.

Ha, tu insinue que j'ai fais un copier/coller d'un script sans y toucher ? sans chercher par moi-même ?

J'ai juste bosser dessus de 10H à 18H mais c'est pas grave.

 Aller ... je suis partie de ça : http://www.sanwebe.com/assets/ajax-image-upload/

Je veut pas de médaille, mais pour quelqu'un qui n'y connais rien en javascript je penses pas avoir copier/coller bêtement

-
Edité par florianlecoconnier 9 février 2016 à 11:49:33

Je n'ai pas dis ça, j'ai juste dit que cela ne peut être que bénéfique pour toi de te creuser le cerveaux tout seul pendant des heures

Et bien c'est ce que j'ai fais haha Et surtout, c'est plus comme avant ou à chaque petit problème je venais demander un coup de main, la je cherches mais pour le coup j'ai deux soucis est je suis incapable de savoir si ça proviens du php ou js