8768 sujets

Développement web côté serveur, CMS

Problème Image Multiple Upload Ajax PHP

Bonjour à tous,

Aujourd'hui il me reste un problème sur mon projet actuel.

Je m'explique, j'ai récupéré un script sur CodePen pour faire un upload d'image avec preview et tout le tralala (https://codepen.io/rrorg/pen/Maxzpz).

J'ai réussi à le faire fonctionner avec un ajout de watermark, déplacement et renommage d'image.

Cependant voilà les problèmes présents que je n'arrive pas à résoudre :
- L'upload ne prend en compte que la dernière photo (ou les dernières, mais en gros uniquement le dernier click sur l'input)
- Je n'arrive pas à rajouter de messages d'erreurs si image trop grande / lourde / format inadapté
- Le crop ou la rotation n'est pas pris en compte lors du submit
- Je n'arrive pas à faire apparaître mes photos si on fait un retour en arrière sur le form suivant

Je ne sais pas si j'ai été assez clair, voici mon code :


<p>Images : <span class="imupl-files-current"></span> / <span class="imupl-files-max"></span>
										<button class="bt bt-black imupl-button-choose"><i class="fa fa-upload"></i> Upload</button></p>

										<div class="imupl-files-list"></div>

										<input type="file" multiple class="imupl-fileinput" name="pictures[]" accept=".png, .jpg, .jpeg" />




<script>
var imuplFilesMax = 10;
var imuplMaxDimension = 1200;
var imuplJpgQuality = 0.50;
var imuplMaxEditorSize = 0.8;

var imuplFilesCurrent = 0;
var imuplOffset = 1;
var imuplFiles = [];
var imuplEditorLoaded = 0;
var imuplCropperDragging = 0;
var imuplEditorRatio = 1;

var $imuplFilesList = $('.imupl-files-list'),
	$imuplFilesCurrent = $('.imupl-files-current'),
	$imuplFilesMax = $('.imupl-files-max'),
	$imuplEditorImg = $('.imupl-edit-overlay .thumbnail .img'),
	$imuplEditorOverlay = $('.imupl-edit-overlay'),
	$imuplCropWrapper = $('.imupl-crop-wrapper'),
	$imuplCropper = $('.imupl-cropper'),
	$imuplCropperStart = $('.imupl-cropper-start'),
	$imuplCropperEnd = $('.imupl-cropper-end');

$imuplFilesList.sortable();

function imuplUpdateFileCount() {
	$imuplFilesCurrent.html(imuplFilesCurrent);
	$imuplFilesMax.html(imuplFilesMax);
}
imuplUpdateFileCount();

function imuplRender(offset) {
	var img = imuplFiles[offset];
	var thisElement = $('div[data-imupl-offset="' + offset + '"]');

	var cropWidth = img.cropEndX - img.cropStartX;
	var cropHeight = img.cropEndY - img.cropStartY;
	var finalWidth = 0;
	var finalHeight = 0;
	if (cropWidth <= imuplMaxDimension && cropHeight <= imuplMaxDimension) {
		finalWidth = cropWidth;
		finalHeight = cropHeight;
	} else if (cropWidth > cropHeight) {
		finalWidth = imuplMaxDimension;
		finalHeight = cropHeight * (imuplMaxDimension / cropWidth);
	} else {
		finalHeight = imuplMaxDimension;
		finalWidth = cropWidth * (imuplMaxDimension / cropHeight);
	}

	var canvas = document.createElement('canvas');
	canvas.width = finalWidth;
	canvas.height = finalHeight;
	var context = canvas.getContext('2d');

	context.drawImage(img.imgObj, img.cropStartX, img.cropStartY, cropWidth, cropHeight, 0, 0, finalWidth, finalHeight);
	img.resultData = canvas.toDataURL('image/jpeg', imuplJpgQuality);

	thisElement.css('background-image', 'url(' + img.resultData + ')');
	$('input', thisElement).val(img.resultData);
	thisElement.removeClass('loading');
}

function imuplRotateCW(offset) {
	var img = imuplFiles[offset];
	var newWidth = img.origHeight,
		newHeight = img.origWidth;
	var oldCropStartX = img.cropStartX,
		oldCropEndX = img.cropEndX,
		oldCropStartY = img.cropStartY,
		oldCropEndY = img.cropEndY;

	img.cropStartX = img.origHeight - oldCropEndY;
	img.cropStartY = oldCropStartX;
	img.cropEndX = img.origHeight - oldCropStartY;
	img.cropEndY = oldCropEndX;
	img.origHeight = newHeight;
	img.origWidth = newWidth;

	var canvas = document.createElement('canvas');
	canvas.width = newWidth;
	canvas.height = newHeight;
	var context = canvas.getContext('2d');

	context.save();
	context.translate(newWidth / 2, newHeight / 2);
	context.rotate(90 * Math.PI / 180);
	context.drawImage(img.imgObj, -(newHeight / 2), -(newWidth / 2));
	context.restore();

	img.rawData = canvas.toDataURL();
	var imgObj = new Image;
	imgObj.onload = function() {
		img.imgObj = imgObj;
		imuplRender(offset);
	};
	imgObj.src = img.rawData;
}

function imuplRotateCCW(offset) {
	var img = imuplFiles[offset];
	var newWidth = img.origHeight,
		newHeight = img.origWidth;
	var oldCropStartX = img.cropStartX,
		oldCropEndX = img.cropEndX,
		oldCropStartY = img.cropStartY,
		oldCropEndY = img.cropEndY;

	img.cropStartX = oldCropStartY;
	img.cropStartY = img.origWidth - oldCropEndX;
	img.cropEndX = oldCropEndY;
	img.cropEndY = img.origWidth - oldCropStartX;
	img.origHeight = newHeight;
	img.origWidth = newWidth;

	var canvas = document.createElement('canvas');
	canvas.width = newWidth;
	canvas.height = newHeight;
	var context = canvas.getContext('2d');

	context.save();
	context.translate(newWidth / 2, newHeight / 2);
	context.rotate(-90 * Math.PI / 180);
	context.drawImage(img.imgObj, -(newHeight / 2), -(newWidth / 2));
	context.restore();

	img.rawData = canvas.toDataURL();
	var imgObj = new Image;
	imgObj.onload = function() {
		img.imgObj = imgObj;
		imuplRender(offset);
	};
	imgObj.src = img.rawData;
}

function imuplCloseEditor() {
	$imuplEditorOverlay.removeClass('active');
	var img = imuplFiles[imuplEditorLoaded];
	img.cropStartX = parseInt($imuplCropper.css('left'))/imuplEditorRatio;
	img.cropStartY = parseInt($imuplCropper.css('top'))/imuplEditorRatio;
	img.cropEndX = ($imuplCropWrapper.width()-parseInt($imuplCropper.css('right')))/imuplEditorRatio;
	img.cropEndY = ($imuplCropWrapper.height()-parseInt($imuplCropper.css('bottom')))/imuplEditorRatio;
	console.log(img);
	setTimeout(function() {
		imuplRender(imuplEditorLoaded);
		imuplEditorLoaded=0;
	}, 1);
}

function imuplOpenEditor(offset) {
	var img = imuplFiles[offset];
	imuplEditorLoaded = offset;
	imuplCropperDragging = 0;

	$imuplEditorImg.attr('style', '');
	$imuplEditorImg.css('background-image', 'url(' + img.rawData + ')');

	var imgWidth = img.origWidth,
		imgHeight = img.origHeight,
		ratio = 1;
	if (imgWidth > $(window).width() * imuplMaxEditorSize) {
		ratio *= $(window).width() * imuplMaxEditorSize / imgWidth;
	}
	if (imgHeight > $(window).height() * imuplMaxEditorSize) {
		ratio *= $(window).height() * imuplMaxEditorSize / imgHeight;
	}
	imgWidth = img.origWidth * ratio;
	imgHeight = img.origHeight * ratio;

	$imuplEditorImg.css('width', imgWidth);
	$imuplEditorImg.css('height', imgHeight);

	$imuplCropper.css('left',img.cropStartX*ratio).css('top',img.cropStartY*ratio);
	$imuplCropper.css('right',imgWidth - img.cropEndX*ratio).css('bottom',imgHeight - img.cropEndY*ratio);

	imuplEditorRatio = ratio;
	$imuplEditorOverlay.addClass('active');
}

function imuplAddFile(f) {
	if (imuplFilesCurrent >= imuplFilesMax ||  f.type.indexOf("image") !== 0) {
		return;
	}
	var thisOffset = imuplOffset++;
	var thisElement = $('<div class="imupl-file-item loading" data-imupl-offset="' + thisOffset + '"><div class="options-wrapper"><div class="imupl-button-remove"></div><div class="imupl-button-edit"></div><div class="imupl-button-rotate-ccw"></div><div class="imupl-button-rotate-cw"></div><input type="hidden" name="imupl-payload[]" value="" /></div></div>');
	var reader = new FileReader();
	reader.onload = function(e) {
		var img = new Image;
		img.onload = function() {
			var newImage = {
				rawData: e.target.result,
				resultData: e.target.result,
				imgObj: img,
				origWidth: img.width,
				origHeight: img.height,
				cropStartX: 0,
				cropStartY: 0,
				cropEndX: img.width,
				cropEndY: img.height
			};
			imuplFiles[thisOffset] = newImage;
			imuplRender(thisOffset);
		};
		img.src = e.target.result;
	}
	reader.readAsDataURL(f);
	thisElement.appendTo($imuplFilesList);
	
	$('.imupl-button-remove', thisElement).click(function() {
		var o = $(this).parent().parent().attr('data-imupl-offset');
		delete imuplFiles[o];
		$(this).parent().parent().remove();
		imuplFilesCurrent--;
		imuplUpdateFileCount();
	});
	
	$('.imupl-button-rotate-cw', thisElement).click(function() {
		var o = $(this).parent().parent().attr('data-imupl-offset');
		$('div[data-imupl-offset="' + o + '"]').addClass('loading').css('background-image', '');
		setTimeout(function() {
			imuplRotateCW(o);
		}, 1);
	});
	
	$('.imupl-button-rotate-ccw', thisElement).click(function() {
		var o = $(this).parent().parent().attr('data-imupl-offset');
		$('div[data-imupl-offset="' + o + '"]').addClass('loading').css('background-image', '');
		setTimeout(function() {
			imuplRotateCCW(o);
		}, 1);
	});
	
	$('.imupl-button-edit', thisElement).click(function() {
		var o = $(this).parent().parent().attr('data-imupl-offset');
		$('div[data-imupl-offset="' + o + '"]').addClass('loading').css('background-image', '');
		imuplOpenEditor(o);
	});
	imuplFilesCurrent++;
	imuplUpdateFileCount();
}

$('.imupl-button-choose').click(function(e)  {
	e.preventDefault();
	$('.imupl-fileinput').trigger('click');
});

$('.imupl-fileinput').on('change', function(e) {
	e.preventDefault();
	e.stopPropagation();
	var files = e.target.files;
	for (var i = 0, f; f = files[i]; i++) {
		imuplAddFile(f);
	}
});

$('body').on('drop', function(e) {
	e.preventDefault();
	e.stopPropagation();
	if (imuplFilesCurrent >= imuplFilesMax ||  imuplEditorLoaded != 0) {
		return;
	}
	$('.imupl-dragdrop-hover').removeClass('active');
	var files = e.originalEvent.dataTransfer.files;
	for (var i = 0, f; f = files[i]; i++) {
		imuplAddFile(f);
	}
});

function imuplMoveCropper(e) {
	if(!imuplCropperDragging) {
		return;
	}
	e.preventDefault();
	if(imuplCropperDragging == 1) {
		var posX = e.pageX - $imuplCropWrapper.offset().left;
		var posY = e.pageY - $imuplCropWrapper.offset().top;
		posX = Math.max(0,posX);
		posY = Math.max(0,posY);
		posX = Math.min(posX,$imuplCropWrapper.width()-parseInt($imuplCropper.css('right'))-40);
		posY = Math.min(posY,$imuplCropWrapper.height()-parseInt($imuplCropper.css('bottom'))-40);
		$imuplCropper.css('left',posX);
		$imuplCropper.css('top',posY);
	}
	if(imuplCropperDragging == 2) {
		var posX = e.pageX - $imuplCropWrapper.offset().left;
		var posY = e.pageY - $imuplCropWrapper.offset().top;
		posX = Math.min($imuplCropWrapper.width(),posX);
		posY = Math.min($imuplCropWrapper.height(),posY);
		posX = Math.max(posX,parseInt($imuplCropper.css('left'))+40);
		posY = Math.max(posY,parseInt($imuplCropper.css('top'))+40);
		posX = $imuplCropWrapper.width() - posX;
		posY = $imuplCropWrapper.height() - posY;
		$imuplCropper.css('right',posX);
		$imuplCropper.css('bottom',posY);
	}
}
$('body').mousemove(imuplMoveCropper);

$imuplCropperStart.mousedown(function(e) {
	e.preventDefault();
	imuplCropperDragging = 1;
});

$imuplCropperEnd.mousedown(function(e) {
	e.preventDefault();
	imuplCropperDragging = 2;
});

$('body').mouseup(function(){
	imuplCropperDragging = 0;
});

$('.imupl-button-edit-save').click(imuplCloseEditor);

$('body').on('dragover', function(e) {
	e.preventDefault();
	e.stopPropagation();
	if (imuplFilesCurrent >= imuplFilesMax ||  imuplEditorLoaded != 0) {
		return;
	}
	$('.imupl-dragdrop-hover').addClass('active');
});

$('body').on('dragleave', function(e) {
	e.preventDefault();
	e.stopPropagation();
	$('.imupl-dragdrop-hover').removeClass('active');
});
</script>


Et pour quand on submit :


if(isset($_FILES['pictures']))
										{
											// $pictures = $_FILES['pictures'];
											$fileCount = count($_FILES['pictures']['name']);

											$ID_PICTURES_TEMP = mt_rand();
											echo '<input type="hidden" id="pictures-id" name="pictures-id" value="' . $ID_PICTURES_TEMP . '">';

											$path = './files/productPicturesTemp/' . $ID_PICTURES_TEMP . '/';
											$valid_formats = array("jpg", "png", "jpeg", "JPG", "PNG", "JPEG");

											if(!is_dir($path))
												mkdir($path, 0755);

											for ($i = 0; $i < $fileCount; $i++)
											{
												$name = $_FILES['pictures']['name'][$i];

												list($txt, $ext) = explode('.', $name);

												$image_name = $ID_PICTURES_TEMP . '-' . $i . '.' . $ext;
												$tmp = $_FILES['pictures']['tmp_name'][$i];

												if(in_array($ext, $valid_formats))
												{
													if(move_uploaded_file($tmp, $path . $image_name))
													{
														if($ext == "png")
															$image = imagecreatefrompng($path . $image_name);
														else
															$image = imagecreatefromjpeg($path . $image_name);

														$watermarksrc = 'watermark.png';
														$logoImage = imagecreatefrompng($watermarksrc);

														imagealphablending($logoImage, true);

														$imageWidth		= imagesx($image);
														$imageHeight 	= imagesy($image);

														$logoWidth		= imagesx($logoImage);
														$logoHeight		= imagesy($logoImage);

														$percent = $imageWidth * 0.10;
														$posx = round(imagesx($image) / 1.03) - round($percent / 1.1);
														$posy = round(imagesy($image) / 1.03) - round($percent / 1.1);

														$dest_image = imagecreatetruecolor($percent, $percent);
														imagealphablending( $dest_image, false );
														imagesavealpha( $dest_image, true );
														imagecopyresampled($dest_image, $logoImage, 0, 0, 0, 0, $percent, $percent, $logoWidth, $logoHeight);

														$logoWidth		= imagesx($logoImage);
														$logoHeight		= imagesy($logoImage);

														imagecopy($image, $dest_image, round($posx), round($posy), 0, 0, $percent, $percent);
														
														if($ext == "png")
															@imagepng($image, $path . $image_name);
														else
															@imagejpeg($image, $path . $image_name);
													}
													else
														echo 'Failed';
												}
												else
													echo 'Invalid file format..';
											}


Merci d'avance pour votre aide,
Sujet clos
Aller à