11525 sujets

JavaScript, DOM et API Web HTML5

Bonjour à toutes et tous,

Question rapide. J'ai un fichier php qui me renvoi un retour JSON avec un contenu que j'ai besoin de traiter. Hors je ne sais pas comment faire.

Dans ce retour j'ai 2 élements : 1 status (ok ou ko), et une url.

Je cherche a récupérer l'url {url : http://...} afin de m'en servir mais je ne connais pas la façon d'utiliser le contenu d'un retour JSON. Je sais juste déclencher des évènements via un callback si mon JSON est égal à telle ou telle valeur.

Need Help Smiley smile
Modifié par Klesk (27 Sep 2012 - 18:35)
Merci pour ta réponse mais j'avoue ne pas avoir trop compris ce qu'elle est censée m'apporter. Dans le titre de mon post j'indique justement que j'utilise JQuery... et en l'occurence je ne vais pas chercher un fichier .json mais je reçois un retour json depuis du php... donc le getJSON...

Je cherche juste la syntaxe pour exploiter le contenu de ce retour JSON.
Modifié par Klesk (26 Sep 2012 - 14:01)
J'ai du mal comprendre l'utilisation de getJSON alors. Cette méthode demande une url, comme tout GET en gros, que je n'ai pas dans le cas présent puisque mes données (image) sont envoyées en amont en post. Je reçois donc uniquement un retour json que je devrai pouvoir exploiter via un callback. Sauf que mon souci c'est que dans ce callback je ne sais pas comment récupérer tel ou tel élément de ce fameux retour json.

Si tu as des précisions je suis preneur.
Modifié par Klesk (26 Sep 2012 - 14:27)
Salut,

Moi j'ai pas comprit comment il arrive ce JSON Smiley biggol .
Il est déjà dans une variable du script ou il y a de l'ajax ?
Et c'est du JSON ou une chaîne formater en JSON ? Pour le dernier point, il y a JSON.parse() ou jQuery.parseJSON().

Après si c'est l'utilisation d'un objet json qui te perturbes, considère le comme n'importe quel objet java-script:
var monjson. = {url: "…", status: …}
//...
affiche(monjson.url)
Alors en résumé :

1. J'ai un formulaire d'upload d'image utilisant JQuery et jquery.filedrop.js.
2. Mon post est envoyé a un fichier php qui se charge de traiter l'upload, de renommer l'image, et de renseigner son url en BDD dans une table concernant un produit.
3. Une fois le traitement effectué, le fichier php me fait un retour json de la forme {"status":"ok","url":"urldufichier"}.
4. Je récupère l'url du fichier dans le json afin de faire le refresh d'un div en appelant le fichier qui vient d'être uploadé.

C'est la partie 4 que je ne sais pas faire Smiley smile .

L'API de filedrop permet déjà un callback avec uploadFinished:function(i,file,response){};, il me reste juste a savoir quoi y mettre Smiley smile


uploadFinished:function(i,file,response){
	$.data(file).addClass('done');
	// response is the JSON object that post_file.php returns
},


Dans ce callback on me dit que response est censé être l'objet JSON retourné par mon fameux fichier php. Hors je n'arrive pas à l'exploiter pour en sortir la valeur correspondant au champ url :
Modifié par Klesk (26 Sep 2012 - 16:36)
Salut, habituellement ta variable `response` contiendra un object js (ton `json`).

Essaie voir ce quelle contient: `console.log( response )`. Si ça ne donne rien, regarde tout ce que tu reçois `console.log( arguments )`.

Dans ton console donc, tu verras ce que tu as reçu, un plugin jquery bien fait aura automatiquement parsé le json (parce que jquery le fait "automatiquement" si un json est renvoyé d'une fonction ajax).

Alors, tu devrais pouvoir simplement utiliser:


function(i, file, response){
    console.log( response.url );
};


Si `response` est une string, alors tu pourras utiliser `$.parseJSON( response )` pour parser la string JSON. Mais à ce moment, le problème serait plus vraisemblablement ton serveur qui ne renvoie pas les bons headers HTTP lors de sa réponse.
Alors qd je fais un console.log( response ); dans ma console firebug après avoir executé mon upload etc, ça me dit :


ReferenceError: response is not defined

console.log( response.url );


D'autre part quand mon upload est terminé j'ai cette erreur dans la console :


SyntaxError: missing ] after element list

[object Object]

Modifié par Klesk (27 Sep 2012 - 09:31)
au pif, le json retourné est invalide. Par exemple, les clefs doivent être entre guillemets simple ou double contrairement au js où c'est optionnel.
Vaxilart a écrit :
Klesk log `arguments` et dis nous ce que ça te donne.


Alors une fois 'arguments' logué j'obtiens les éléments suivants durant l'upload :


http://imageshack.us/a/img820/8193/dropfile.jpg


En 2 on constate le retour JSON avec le statut de l'upload et l'url du fichier sur le serveur. La fameuse url que je veux récupérer de façon à m'en servir.
Modifié par Klesk (27 Sep 2012 - 10:02)
Salut,

Ton objet JSON est un tableau et, apparemment, la valeur souhaitée se trouve dans un objet à l'index 2, dans la propriété "url".

A priori, "response[2].url" devrait te donner le truc...

tm
Il me dit que response is not defined Smiley decu

Voici la fonction concernée :


$(function(){
	var dropbox = $('#dropbox'),
		message = $('.message', dropbox);
	
	dropbox.filedrop({
		// The name of the $_FILES entry:
		paramname: modele,
		data: {imei: imeinumber},
		maxfiles: 1,
		maxfilesize: 0.29296875,
		url: 'http://www.monurl.com/emm/utilisateurs/post_file.php',
		
		uploadFinished:function(i,file,response){
			$.data(file).addClass('done');
			// response is the JSON object that post_file.php returns
			console.log( arguments );

		},
		
		error: function(err, file) {
			switch(err) {
				case 'BrowserNotSupported':
					showMessage('Votre navigateur ne supporte pas l\'upload HTML5 !');
					break;
				case 'TooManyFiles':
					alert('Trop de fichiers !');
					break;
				case 'FileTooLarge':
					alert(file.name+' est trop volumineux! Le maximum autorisé est 300Ko.');
					break;
				default:
					break;
			}
		},
		
		// Called before each upload is started
		beforeEach: function(file){
			if(!file.type.match(/^image\//)){
				alert('Seules les images sont autorisées!');
				
				// Returning false will cause the
				// file to be rejected
				return false;
			}
		},
		
		uploadStarted:function(i, file, len){
			createImage(file);
		},
		
		progressUpdated: function(i, file, progress) {
			$.data(file).find('.progress').width(progress);
		}
		 
	});
	
	var template = '<div class="preview">'+
						'<span class="imageHolder">'+
							'<img />'+
							'<span class="uploaded"></span>'+
						'</span>'+
						'<div class="progressHolder">'+
							'<div class="progress"></div>'+
						'</div>'+
					'</div>'; 
	
	
	function createImage(file){

		var preview = $(template), 
			image = $('img', preview);
			
		var reader = new FileReader();
		
		image.width = 100;
		image.height = 100;
		
		reader.onload = function(e){
			
			// e.target.result holds the DataURL which
			// can be used as a source of the image:
			
			image.attr('src',e.target.result);
		};
		
		// Reading the file as a DataURL. When finished,
		// this will trigger the onload function above:
		reader.readAsDataURL(file);
		
		message.hide();
		preview.appendTo(dropbox);
		
		// Associating a preview container
		// with the file, using jQuery's $.data():
		
		$.data(file,preview);
	}

	function showMessage(msg){
		message.html(msg);
	}

});

Modifié par Klesk (27 Sep 2012 - 15:15)
Je suis vraiment, mais alors vraiment... trop con ^^.


uploadFinished:function(i,file,json){
	$.data(file).addClass('done');
	var url = json.url;
	// response is the JSON object that post_file.php returns
	$('#illustration').html('<legend>Illustration</legend><div style="float:left;margin:10px 5px 10px 0;"><img src="' + url + '" /></div><div id="dropbox"><span class="message">D&eacute;posez votre image ici. Formats jpg/png autoris&eacute;s, max 300ko, format carr&eacute;.</span></div>');
}


response c'est une mention type qui est décrite dans l'api...

Donc en gros ça marche maintenant. En revanche il subsiste un problème. Mon image uploadée, si elle remplace une image existante, aura le même nom et la même url que la précédente. Le souci c'est que du coup le navigateur va me chercher l'image dans son cache. Comment forcer le fait qu'il recharge l'image ?

EDIT : Ca marche en ajoutant ?id=1 derrière l'url de mon image. Ca contourne le souci de cache mais c'est pas propre. Y a t-il un moyen en js, de supprimer cette image précisément du cache ?

EDIT 2 : Je vais ajouter un timestamp dans l'url qui est envoyée en bdd et l'envoyer dans mon retour json. Comme ça je force le browser a recharger l'image sauf qd ya pas d'upload Smiley smile
Modifié par Klesk (27 Sep 2012 - 16:32)