11499 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

j'essaye de faire un petit script qui envoie les images et qui les redimensionne avant l'upload avec javascipt.

Pour le redimensionnement et l'upload c'est en ordre, mon souci viens du nom du fichier original que je souhaite conserver.

Voici le code


function upload_image()
{
	images = document.getElementById('images_select').files;
	for(i = 0;i < images.length; i++)
	{
		var miniature=new FileReader();
		miniature.readAsDataURL(images[i]);
		miniature.onloadend = function(e) //Mon souci commence ici à partir d'ici je ne sais pas récupérer images[i].name
		{
			image_miniature = document.createElement("img");
			image_miniature.src = e.target.result;
			//DEBUT du redimensionnement
				var maxWidth = 100;
				var maxHeight = 100;
				imageWidth = image_miniature.width;
				imageHeight = image_miniature.height;		
				if (imageWidth > imageHeight)
				{
					if (imageWidth > maxWidth)
					{
						imageHeight = imageHeight*(maxWidth / imageWidth);
						imageWidth = maxWidth;
					}
				}
				else
				{
					if (imageHeight > maxHeight)
					{
						imageWidth = imageWidth*(maxHeight / imageHeight);
						imageHeight = maxHeight;
					}
				}
			var canvas = document.createElement('canvas');
			canvas.width = imageWidth;
			canvas.height = imageHeight;
			image_miniature.width = imageWidth;
			image_miniature.height = imageHeight;
			var ctx = canvas.getContext("2d");
			ctx.drawImage(image_miniature, 0, 0, imageWidth, imageHeight);
			var dataURL = canvas.toDataURL(images.type);
			//Transforme le data url du canva en blob pour l'envoie par fomulaire
			var blob = dataURItoBlob(dataURL);
			//FIN
			//Creer un formulaire
			var formulaire = new FormData();
			//Ajoute l'image
			formulaire.append('images',blob);
			//Ajoute le nom de l'image
			formulaire.append('nom_image',images[i].name);
			var xhr_object;
			if(window.XMLHttpRequest) // FIREFOX 
			xhr_object = new XMLHttpRequest(); 
			else if(window.ActiveXObject) // IE 
			xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); 
			else 
			return(false);
			xhr_object.open("POST", "upload.php", false);
			xhr_object.send(formulaire);
			alert(xhr_object.responseText);
		}
	}
}


Mon problème et de savoir comment récupérer le nom de mon fichier images.name dans la fonction.

D'avance merci à ceux qui se pencheront sur la question. Smiley cligne
[/i][/i][/i]
salut,
c'est parce que tu pers la valeur de ton "i" , il faut passer par des closures

(function(i){
   miniature.onloadend = function(e) {...}
})(i)
Bonjour,

merci pour l'information, cela fonctionne très bien.

N'étant pas expert, je vais me pencher sur ces Closures. Smiley lol