probleme affichage images

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : probleme affichage images

Re: probleme affichage images

par romantica » 16 juin 2011, 20:11

merci tu sympa,si tu veux m'aider...
cordialement

Re: probleme affichage images

par moogli » 16 juin 2011, 19:34

hum je vais pas debugguer tout ça hein désolé, faut que tu test ton script d'upload seul et ensuite tu ajoute le foutoir JS.

a tu regardé sur disque (enfin sur ton espace disque) s'il n'y avait pas de répertoire avec des noms bizarres ?

dans la page annonce c'est toi géré comment le nom du répertoire que tu met dans le lien sur l'iframe ?


@+

Re: probleme affichage images

par romantica » 16 juin 2011, 19:08

le code de l'frame viens de ajaxupload.3.5.js que voici:

(function(){
	
var d = document, w = window;

/**
 * Get element by id
 */	
function get(element){
	if (typeof element == "string")
		element = d.getElementById(element);
	return element;
}

/**
 * Attaches event to a dom element
 */
function addEvent(el, type, fn){
	if (w.addEventListener){
		el.addEventListener(type, fn, false);
	} else if (w.attachEvent){
		var f = function(){
		  fn.call(el, w.event);
		};			
		el.attachEvent('on' + type, f)
	}
}


/**
 * Creates and returns element from html chunk
 */
var toElement = function(){
	var div = d.createElement('div');
	return function(html){
		div.innerHTML = html;
		var el = div.childNodes[0];
		div.removeChild(el);
		return el;
	}
}();

function hasClass(ele,cls){
	return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function addClass(ele,cls) {
	if (!hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
	var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
	ele.className=ele.className.replace(reg,' ');
}

// getOffset function copied from jQuery lib (http://jquery.com/)
if (document.documentElement["getBoundingClientRect"]){
	// Get Offset using getBoundingClientRect
	// http://ejohn.org/blog/getboundingclientrect-is-awesome/
	var getOffset = function(el){
		var box = el.getBoundingClientRect(),
		doc = el.ownerDocument,
		body = doc.body,
		docElem = doc.documentElement,
		
		// for ie 
		clientTop = docElem.clientTop || body.clientTop || 0,
		clientLeft = docElem.clientLeft || body.clientLeft || 0,
		
		// In Internet Explorer 7 getBoundingClientRect property is treated as physical,
		// while others are logical. Make all logical, like in IE8.
		
		
		zoom = 1;
		if (body.getBoundingClientRect) {
			var bound = body.getBoundingClientRect();
			zoom = (bound.right - bound.left)/body.clientWidth;
		}
		if (zoom > 1){
			clientTop = 0;
			clientLeft = 0;
		}
		var top = box.top/zoom + (window.pageYOffset || docElem && docElem.scrollTop/zoom || body.scrollTop/zoom) - clientTop,
		left = box.left/zoom + (window.pageXOffset|| docElem && docElem.scrollLeft/zoom || body.scrollLeft/zoom) - clientLeft;
				
		return {
			top: top,
			left: left
		};
	}
	
} else {
	// Get offset adding all offsets 
	var getOffset = function(el){
		if (w.jQuery){
			return jQuery(el).offset();
		}		
			
		var top = 0, left = 0;
		do {
			top += el.offsetTop || 0;
			left += el.offsetLeft || 0;
		}
		while (el = el.offsetParent);
		
		return {
			left: left,
			top: top
		};
	}
}

function getBox(el){
	var left, right, top, bottom;	
	var offset = getOffset(el);
	left = offset.left;
	top = offset.top;
						
	right = left + el.offsetWidth;
	bottom = top + el.offsetHeight;		
		
	return {
		left: left,
		right: right,
		top: top,
		bottom: bottom
	};
}

/**
 * Crossbrowser mouse coordinates
 */
function getMouseCoords(e){		
	// pageX/Y is not supported in IE
	// http://www.quirksmode.org/dom/w3c_cssom.html			
	if (!e.pageX && e.clientX){
		// In Internet Explorer 7 some properties (mouse coordinates) are treated as physical,
		// while others are logical (offset).
		var zoom = 1;	
		var body = document.body;
		
		if (body.getBoundingClientRect) {
			var bound = body.getBoundingClientRect();
			zoom = (bound.right - bound.left)/body.clientWidth;
		}

		return {
			x: e.clientX / zoom + d.body.scrollLeft + d.documentElement.scrollLeft,
			y: e.clientY / zoom + d.body.scrollTop + d.documentElement.scrollTop
		};
	}
	
	return {
		x: e.pageX,
		y: e.pageY
	};		

}
/**
 * Function generates unique id
 */		
var getUID = function(){
	var id = 0;
	return function(){
		return 'ValumsAjaxUpload' + id++;
	}
}();

function fileFromPath(file){
	return file.replace(/.*(\/|\\)/, "");			
}

function getExt(file){
	return (/[.]/.exec(file)) ? /[^.]+$/.exec(file.toLowerCase()) : '';
}			

// Please use AjaxUpload , Ajax_upload will be removed in the next version
Ajax_upload = AjaxUpload = function(button, options){
	if (button.jquery){
		// jquery object was passed
		button = button[0];
	} else if (typeof button == "string" && /^#.*/.test(button)){					
		button = button.slice(1);				
	}
	button = get(button);	
	
	this._input = null;
	this._button = button;
	this._disabled = false;
	this._submitting = false;
	// Variable changes to true if the button was clicked
	// 3 seconds ago (requred to fix Safari on Mac error)
	this._justClicked = false;
	this._parentDialog = d.body;
	
	if (window.jQuery && jQuery.ui && jQuery.ui.dialog){
		var parentDialog = jQuery(this._button).parents('.ui-dialog');
		if (parentDialog.length){
			this._parentDialog = parentDialog[0];
		}
	}			
					
	this._settings = {
		// Location of the server-side upload script
		action: 'upload.php',			
		// File upload name
		name: 'userfile',
		// Additional data to send
		data: {},
		// Submit file as soon as it's selected
		autoSubmit: true,
		// The type of data that you're expecting back from the server.
		// Html and xml are detected automatically.
		// Only useful when you are using json data as a response.
		// Set to "json" in that case. 
		responseType: false,
		// When user selects a file, useful with autoSubmit disabled			
		onChange: function(file, extension){},					
		// Callback to fire before file is uploaded
		// You can return false to cancel upload
		onSubmit: function(file, extension){},
		// Fired when file upload is completed
		// WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE!
		onComplete: function(file, response) {}
	};

	// Merge the users options with our defaults
	for (var i in options) {
		this._settings[i] = options[i];
	}
	
	this._createInput();
	this._rerouteClicks();
}
			
// assigning methods to our class
AjaxUpload.prototype = {
	setData : function(data){
		this._settings.data = data;
	},
	disable : function(){
		this._disabled = true;
	},
	enable : function(){
		this._disabled = false;
	},
	// removes ajaxupload
	destroy : function(){
		if(this._input){
			if(this._input.parentNode){
				this._input.parentNode.removeChild(this._input);
			}
			this._input = null;
		}
	},				
	/**
	 * Creates invisible file input above the button 
	 */
	_createInput : function(){
		var self = this;
		var input = d.createElement("input");
		input.setAttribute('type', 'file');
		input.setAttribute('name', this._settings.name);
		var styles = {
			'position' : 'absolute'
			,'margin': '-5px 0 0 -175px'
			,'padding': 0
			,'width': '220px'
			,'height': '30px'
			,'fontSize': '14px'								
			,'opacity': 0
			,'cursor': 'pointer'
			,'display' : 'none'
			,'zIndex' :  2147483583 //Max zIndex supported by Opera 9.0-9.2x 
			// Strange, I expected 2147483647					
		};
		for (var i in styles){
			input.style[i] = styles[i];
		}
		
		// Make sure that element opacity exists
		// (IE uses filter instead)
		if ( ! (input.style.opacity === "0")){
			input.style.filter = "alpha(opacity=0)";
		}
							
		this._parentDialog.appendChild(input);

		addEvent(input, 'change', function(){
			// get filename from input
			var file = fileFromPath(this.value);	
			if(self._settings.onChange.call(self, file, getExt(file)) == false ){
				return;				
			}														
			// Submit form when value is changed
			if (self._settings.autoSubmit){
				self.submit();						
			}						
		});
		
		// Fixing problem with Safari
		// The problem is that if you leave input before the file select dialog opens
		// it does not upload the file.
		// As dialog opens slowly (it is a sheet dialog which takes some time to open)
		// there is some time while you can leave the button.
		// So we should not change display to none immediately
		addEvent(input, 'click', function(){
			self.justClicked = true;
			setTimeout(function(){
				// we will wait 3 seconds for dialog to open
				self.justClicked = false;
			}, 3000);			
		});		
		
		this._input = input;
	},
	_rerouteClicks : function (){
		var self = this;
	
		// IE displays 'access denied' error when using this method
		// other browsers just ignore click()
		// addEvent(this._button, 'click', function(e){
		//   self._input.click();
		// });
				
		var box, dialogOffset = {top:0, left:0}, over = false;							
		addEvent(self._button, 'mouseover', function(e){
			if (!self._input || over) return;
			over = true;
			box = getBox(self._button);
					
			if (self._parentDialog != d.body){
				dialogOffset = getOffset(self._parentDialog);
			}	
		});
		
	
		// we can't use mouseout on the button,
		// because invisible input is over it
		addEvent(document, 'mousemove', function(e){
			var input = self._input;			
			if (!input || !over) return;
			
			if (self._disabled){
				removeClass(self._button, 'hover');
				input.style.display = 'none';
				return;
			}	
										
			var c = getMouseCoords(e);

			if ((c.x >= box.left) && (c.x <= box.right) && 
			(c.y >= box.top) && (c.y <= box.bottom)){			
				input.style.top = c.y - dialogOffset.top + 'px';
				input.style.left = c.x - dialogOffset.left + 'px';
				input.style.display = 'block';
				addClass(self._button, 'hover');				
			} else {		
				// mouse left the button
				over = false;
				if (!self.justClicked){
					input.style.display = 'none';
				}
				removeClass(self._button, 'hover');
			}			
		});			
			
	},
	/**
	 * Creates iframe with unique name
	 */
	_createIframe : function(){
		// unique name
		// We cannot use getTime, because it sometimes return
		// same value in safari :(
		var id = getUID();
		
		// Remove ie6 "This page contains both secure and nonsecure items" prompt 
		// http://tinyurl.com/77w9wh
		var iframe = toElement('<iframe src="javascript:false;" name="' + id + '" />');
		iframe.id = id;
		iframe.style.display = 'none';
		d.body.appendChild(iframe);			
		return iframe;						
	},
	/**
	 * Upload file without refreshing the page
	 */
	submit : function(){
		var self = this, settings = this._settings;	
					
		if (this._input.value === ''){
			// there is no file
			return;
		}
										
		// get filename from input
		var file = fileFromPath(this._input.value);			

		// execute user event
		if (! (settings.onSubmit.call(this, file, getExt(file)) == false)) {
			// Create new iframe for this submission
			var iframe = this._createIframe();
			
			// Do not submit if user function returns false										
			var form = this._createForm(iframe);
			form.appendChild(this._input);
			
			form.submit();
			
			d.body.removeChild(form);				
			form = null;
			this._input = null;
			
			// create new input
			this._createInput();
			
			var toDeleteFlag = false;
			
			addEvent(iframe, 'load', function(e){
					
				if (// For Safari
					iframe.src == "javascript:'%3Chtml%3E%3C/html%3E';" ||
					// For FF, IE
					iframe.src == "javascript:'<html></html>';"){						
					
					// First time around, do not delete.
					if( toDeleteFlag ){
						// Fix busy state in FF3
						setTimeout( function() {
							d.body.removeChild(iframe);
						}, 0);
					}
					return;
				}				
				
				var doc = iframe.contentDocument ? iframe.contentDocument : frames[iframe.id].document;

				// fixing Opera 9.26
				if (doc.readyState && doc.readyState != 'complete'){
					// Opera fires load event multiple times
					// Even when the DOM is not ready yet
					// this fix should not affect other browsers
					return;
				}
				
				// fixing Opera 9.64
				if (doc.body && doc.body.innerHTML == "false"){
					// In Opera 9.64 event was fired second time
					// when body.innerHTML changed from false 
					// to server response approx. after 1 sec
					return;				
				}
				
				var response;
									
				if (doc.XMLDocument){
					// response is a xml document IE property
					response = doc.XMLDocument;
				} else if (doc.body){
					// response is html document or plain text
					response = doc.body.innerHTML;
					if (settings.responseType && settings.responseType.toLowerCase() == 'json'){
						// If the document was sent as 'application/javascript' or
						// 'text/javascript', then the browser wraps the text in a <pre>
						// tag and performs html encoding on the contents.  In this case,
						// we need to pull the original text content from the text node's
						// nodeValue property to retrieve the unmangled content.
						// Note that IE6 only understands text/html
						if (doc.body.firstChild && doc.body.firstChild.nodeName.toUpperCase() == 'PRE'){
							response = doc.body.firstChild.firstChild.nodeValue;
						}
						if (response) {
							response = window["eval"]("(" + response + ")");
						} else {
							response = {};
						}
					}
				} else {
					// response is a xml document
					var response = doc;
				}
																			
				settings.onComplete.call(self, file, response);
						
				// Reload blank page, so that reloading main page
				// does not re-submit the post. Also, remember to
				// delete the frame
				toDeleteFlag = true;
				
				// Fix IE mixed content issue
				iframe.src = "javascript:'<html></html>';";		 								
			});
	
		} else {
			// clear input to allow user to select same file
			// Doesn't work in IE6
			// this._input.value = '';
			d.body.removeChild(this._input);				
			this._input = null;
			
			// create new input
			this._createInput();						
		}
	},		
	/**
	 * Creates form, that will be submitted to iframe
	 */
	_createForm : function(iframe){
		var settings = this._settings;
		
		// method, enctype must be specified here
		// because changing this attr on the fly is not allowed in IE 6/7		
		var form = toElement('<form method="post" enctype="multipart/form-data"></form>');
		form.style.display = 'none';
		form.action = settings.action;
		form.target = iframe.name;
		d.body.appendChild(form);
		
		// Create hidden input element for each data key
		for (var prop in settings.data){
			var el = d.createElement("input");
			el.type = 'hidden';
			el.name = prop;
			el.value = settings.data[prop];
			form.appendChild(el);
		}			
		return form;
	}	
};
})();

Re: probleme affichage images

par moogli » 16 juin 2011, 17:07

heu la valeur que passe en paramètre a l'ifram elle viens d'ou ?
<IFRAME src="annonce/all-index.php?repdossier=Ut26gca5" width="508" height="123" scrolling="auto" frameborder="0" name="alt_index"></IFRAME>

parce que bon ça change à chaque rafraichissement, ça ne serait u truc alléatoire des fois ?

si oui à la limite tu le garde mais il faut que dans la base/fichier/truc il y ait le bon chemin jusqu'a l'image !

je demande vraiment tu n'est pas perdu dans le fonctionnement de la chose ?

de plus cela n'a pas l'air simple de fonctionnement :/

@+

Re: probleme affichage images

par romantica » 16 juin 2011, 16:45

merci tu est sympa,j'ai changé le code que tu m'a mis dans all-index.php;quel code js il faut modifier stp?
merci

Re: probleme affichage images

par moogli » 16 juin 2011, 15:22

hum wé donc faut que tu change le nom du dossier dans le code JS pour que l'annonce aille la où tu le souhaite (parce que dans le code c'est le truc bizard que je t'ai mis plus haut. ce changement est a opérer dans le code JS de la page du formulaire (enfin dans la page que tu a mis dans l'iframe ;) histoire que l tout aille au bon endroit :)


@+

Re: probleme affichage images

par romantica » 16 juin 2011, 13:01

en effet j'ai remarqué cette annonces Iveco daily 35s10 mais je ne la trouve nulle part: j'ai des repoertoires :
ajxupload 3.5.js
builder.js
effetcs.js
lighbox.js
news.js
prototypes.js
scriptaculous.js
verifier.js
et aussi
all-index.ph
ci dessous:
<?php

$repdossier = $_GET['repdossier'];

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>AJAX File Upload - Web Developer Plus Demos</title>
<script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="js/ajaxupload.3.5.js" ></script>
<link rel="stylesheet" type="text/css" href="./styles.css" />
<script type="text/javascript" >
	$(function(){
	var btnUpload=$('#upload');
		var status=$('#status');
		new AjaxUpload(btnUpload, {
<?php
echo "action: 'upload-file.php?repdossier=".$repdossier."',";
?>

			name: 'uploadfile',
			onSubmit: function(file, ext){
				 if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ 
                    // extension is not allowed 
					status.text('Les extentions possible sont JPG, PNG ou GIF');
					return false;
				}
				status.html('Envoi en cours <img src="images/loadingup.gif?<?php echo md5(time()); ?>" border="0" height="6" width="19">');
			},
			onComplete: function(file, response){
				//On completion clear the status
				status.text('');
				//Add uploaded file to list
				if(response==="success"){
					$('<li></li>').appendTo('#files').html('<img src="miniature.php?pic=upload/<?php echo $repdossier; ?>/'+file+'&w_max=70&h_max=60" height="60" width="70" alt="" /><br />').addClass('success');
				} 
                                 if(response==="error1"){
					alert("Vous avez déjà 5 photos pour votre annonce !\nLe maximum de photos autorisées est de 5 !")
				} 
                                if(response==="error2"){
				        alert("La photo selectionnée existe déjà\nRe-selectionnez une autre photo !")
				} 
			}
		});
		
	});
</script>
</head>
<body>

<div id="mainbody" >




<div id="upload" ><span>Ajouter des photos<span></div><span id="status" ></span>

		 <ul id="files" ></ul>
</div>

</body>

</html>



Re: probleme affichage images

par moogli » 16 juin 2011, 12:44

hum je pense qu'il y a un "smilblik" dans tous cela ;)
perso j'ai tesé avec une image png de 33ko et elle ne s'affiche pas à la validation ni même dans l'annonce
il n'y a pas de message d'erreur non plus.

comme je suis un peu motivé j'ai testé directement le script d'upload avec un code tous con
<html>
<head><title>Test du ite dela mari céline</title></head>
<body>
<form action="http://www.azurannonces.fr/annonce/upload-file.php?repdossier=je5TXg3i" method="post" enctype="multipart/form-data">
<label>Une image svp : </label><input type="file" name="uploadfile" />
<br />
<input type="submit" value="go" />
</form>
</body>
</html>
et .......................... ça marque succes donc le fichier doit bien s'uploader

tu a quelque part un répertoire je5TXg3i dans lequel les images sont chargées.

Comprend tu le fonctionnement du script d'upload (avec jquery et tout le toutime).
J'ai l'impression que ce n'est pas qui en est l'auteure (d'ou ma question) au vue de la différence sur le code html ;)

donc le soucis doit ce placer entre l'upload et l'enregistrement du lien de l'image dans ton système (sachant que l'info n'est, a priori, pas passée dans le formulaire ça me semble normale).

d'ailleur c'est quoi cet Iveco daily 35s10 qui apparait dans mon annonce de moto ? :mrgreen:

@+

Re: probleme affichage images

par romantica » 15 juin 2011, 19:47

bonjour,oui mais je ne sais toujours pas comment afficher mes images avec une annonce!
excuse moi mais comme je te l'ai dit a force de chercher je ne trouve plus rien! fait moi plaisir et essai de passer une petites annonce qui tu efface après pour voir si tu vois ou est le problème!http://www.azurannonces.fr merci de ta patience.
cordialement

Re: probleme affichage images

par moogli » 15 juin 2011, 16:54

déja débatu, c'est viable avec un bon cache s'il y a beaucoup de visite et des locks correct sur les fichiers (ceci dit c'est un peu ré inventer la roue mais pratique si tu héberge sur un truc sans sgbd, quoi ça existe peut être ;)).

j'y vois aussi la simplicité pour le mec qui le mec en place vu qu'il n'y a rien a paramétrer ;)


@+

Re: probleme affichage images

par Ez3kiel » 15 juin 2011, 16:21

merci tu est sympa! j'ai oublié de te dire que c'est un site de petites annonces et il fonctionne sans sans base de donnée.
merci
cordialement
:shock: :shock: Je suis curieux de voir ça.

Re: probleme affichage images

par romantica » 14 juin 2011, 18:24

merci tu est sympa! j'ai oublié de te dire que c'est un site de petites annonces et il fonctionne sans sans base de donnée.
merci
cordialement

Re: probleme affichage images

par moogli » 14 juin 2011, 17:54

mwé

ça pourrait donner ça (en considérant l'affichage en même temps, parce que bon faut bien en tenir compte a un moment ou un autre vu que la j'ai bien l'impression que c'est ce que tu veux ;) ).
<?php
list($width, $height, $type, $attr) = getimagesize($pic);
switch($type) {
	case 1: 
		header("Content-Type: image/gif");
		$img_in = imagecreatefromgif($pic);
		imagegif($img_in);
		imagedestroy($img_in);
		break;
	case 2: 
		header("Content-Type: image/jpeg");
		$img_in = imagecreatefromjpeg($pic);
		imagejpeg($img_in);
		imagedestroy($img_in);
		break;
	case 3: 
		header("Content-Type: image/png");
		$img_in = imagecreatefrompng($pic);
		imagepng($img_in);
		imagedestroy($img_in);
		break;
	default : echo 'Error c\'est un pas format que je veux reconnaitre ;) ';
	break;
}
 ?>
a tester

@+

Re: probleme affichage images

par romantica » 13 juin 2011, 20:15

oui mais il s'agit d'images miniature et les formats sont compatibles tous,donc je ne vois pas et a force de chercher je ne vois plus rien!merci de ta patience

Re: probleme affichage images

par moogli » 13 juin 2011, 19:48

salut,

avec var_dump par exemple pour afficher le contenu des variables.
Par contre avec juste un poil de logique onsais que ton code ne fonctionne pas juste en regardant les dernières lignes :
<?php

header("Content-Type: image/jpeg");
list($width, $height, $type, $attr) = getimagesize("$pic");
if($type == "1")
{
$img_in = imagecreatefromgif($pic);
}
if($type == "2")
{
$img_in = imagecreatefromjpeg($pic);
}
if($type == "3")
{
$img_in = imagecreatefrompng($pic);
}
 ?>
Tu peux, dans 2/3 des cas envoyer un "header" qui ne correspond pas a ton image.
D’ailleurs si l'image est d'un autre type (bmp ou autre) le problème sera pire il y aura le header mais pas d'envoi d'image au navigateur !

il faut donc gérer le header en fonction du type d'image et non le fixer.
d'ailleurs quand je vois tes trois if je me dit que ce que tu fait c'est un switch ;)


@+