2010-09-13 4 views
0

Je suis à la recherche d'un côté serveur de script php qui charge une image dans un div sur le côté client.Jquery vs PHP - charger une image dans un div

premier coup: ajax.php

if((isset($_POST['id'])) && ($_POST['id']=="loadphoto") && (ctype_digit($_POST['idp']))) { 
    $query=mysql_query("SELECT articleid, photoid FROM articles_photos WHERE id='".$_POST['idp']."'", $mydb); 
    if(mysql_num_rows($query)!=0){ 
     while($row=mysql_fetch_array($query, MYSQL_NUM)) { 
      $path="./articles/photos/".$row[0]."/".$row[1]; 
     } 

     echo $path; 
    } 
} 

myjs.js

function loadPhoto(mexid) { 
$.ajax({ 
    type: 'POST', 
    cache: false, 
    url: './auth/ajax.php', 
    data: 'idp='+escape(mexid)+'&id=loadphoto', 
    success: function(msg) { 
     $('.articleviewphoto1').find("img").each(function(){ 
      $(this).removeClass().addClass('photoarts'); 
     }); 

     $('#'+mexid).removeClass().addClass('photoartsb'); 
     $('#visualizator').html('<img src="'+msg+'" class="photoartb" />'); 
    } 
}); 
return false; 

}

TNX pour l'aide

+1

Vous voulez dire le code d'image binaire actuel? Pourquoi? Cela a tellement de problèmes et de problèmes de compatibilité. Pourquoi ne pas simplement mettre à jour une propriété 'src' de l'élément' '? –

+0

Comme le dit Pekka, il semble préférable d'avoir ajax.php en écho au src de l'image ... ou une balise d'ancrage qui inclut une balise d'image avec le src de l'image. –

+0

Euh ouais, la solution de Pekka est excellente. Je peux changer la propriété de src, mais j'ai besoin de télécharger le img quand la page est chargée au client. Comment peut-il le faire? Chargez un peu de div avec l'image et placez-les avec l'affichage css: none; propriété? – markzzz

Répondre

0

Vous souhaitez organiser une liste d'images possibles dans le fichier PHP et charger des images différentes en fonction de l'identifiant que vous envoyez? Si oui, vous pouvez définir:

$Img = $_POST['idp']; 

Et utilisez une instruction switch pour passer de nouveau le chemin du fichier d'image:

switch ($Img){ 
    case (some_value): 
     echo 'images/some_file.jpg'; 
     break; 

    case (another_value): 
     echo 'images/another_file.jpg'; 
     break; 

} 

Placez ensuite le chemin du fichier dans une balise et charge qui en $('#visualizator').html();

Suis-je sur la bonne voie au moins avec ce que tu veux? Si c'est le cas, je peux peaufiner la réponse un peu.

+0

ouais! c'est ce que je dois faire. J'ai édité le post et mis le premier exemple. Qu'en pensez-vous? tnx – markzzz

+0

Eh bien, il y a quelques options et paramètres dont je ne connais pas la raison, mais il faut s'attendre maintenant à voir le projet en entier ... mais on dirait que ça marchera très bien. – d2burke

+0

J'ai un problème à ce sujet. J'ai les images comme des pouces dans un div (taille max 100x100px par une règle de css) et la grande photo dans l'autre div (taille 700x700px par une autre règle de css). le problème est que je charge img (avec une taille de 3-4mb, 2048x2112 par exemple), mais avec 5-6 photos de cette taille est trop lent pour le navigateur. La page est très lente. Il y a une solution? Peut-être redimensionner l'image sur le côté serveur lorsque je les télécharge? – markzzz

0

Je suppose que l'image existe déjà quelque part et n'est pas générée à la volée. Dans le script PHP, vous pouvez accéder aux variables avec $_POST['idp'] et $_POST['id']. Faites le traitement dont vous avez besoin, puis simplement echo l'URL. La variable msg dans le javascript sera tout echo 'par le script PHP. Ensuite, vous pouvez simplement faire ceci:

$('#visualizator').html('<img src="' + msg + '" />');
Questions connexes