Zend FR

GyZmO · 29-07-2010 10:53:22

Bonjour,

Je souhaite réaliser un système d'upload d'images qui fonctionne de la façon suivante :

L'utilisateur clic sur "Ajouter une photo", un formulaire apparait ou il sélectionne sa photo et entre une petite description. En cliquant sur valider, je veux que la photo soit uploader dans le dossier correspondant, puis qu'elle soit ajouté à la base de données et enfin qu'elle apparaisse sur la page sans avoir à rafraichir celle-ci (donc par ajax)

J'ai donc essayé de coder tout cela, mais malheureusement ce que j'ai fait ne fonctionne pas !

Voila mon code :

edit.phtml (view)

Code:

<tr>
    <td height="23" align="right">Ajouter des photos <img src="/images/pucen1.gif" width="6" height="10" /></td>
    <td>
        <button type="button" id="ajouter-photo" onClick="document.getElementById('photo-upload').style.display='block';">Ajouter une photo</button>
    </td>
</tr>
<tr>
        <td>
                <ul class="galerie">
        <?php foreach($this->photos as $photos) {if($photos['Principale'] == '0'){?>
            <li class="img-<?php echo $photos['idPhoto'];?>"><img src="/galerie/<?php echo $this->datas['idTourisme'].'/'.$photos['Photo'];?>" title="<?php echo $photos['Descriptif'];?>" /><span id="<?php echo $photos['idPhoto'];?>" class="delete-photos">Supprimer</span>
            </li>
        <?php }}?>
        </ul> 
        </td>
</tr>

<div id="photo-upload" style="position: absolute; left:300px; top:400px;  z-index:100; display:none;">
        <form method="post" enctype="multipart/form-data" action="#">
            <input type="hidden" name="id-tourisme" value="<?php echo $this->datas['idTourisme']?>" />
            <table>
                <tr>
                    <td colspan="2"><h1>Ajouter une photo</h1></td>
                </tr>
                <tr>
                    <td width="20%"><label for="file">Sélectionnez une image <img src="/images/pucen1.gif" width="6" height="10" /></label></td>
                    <td width="80%"><input name="file" id="file" type="file" /></td>
                </tr>
                <tr>
                    <td><label for="photo-descriptif">Description <img src="/images/pucen1.gif" width="6" height="10" /></label></td>
                    <td><textarea name="photo-descriptif" id="photo-descriptif"></textarea></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input id="valider" type="submit" value="Ajouter la photo"/><button type="reset" onClick="document.getElementById('photo-upload').style.display='none';">Annuler</button></td>
                </tr>
            </table>
        </form>
    </div>

Le javascript :

Code:

$("input#valider").click(function(){
        $("#photo-upload").upload('/Ajax/uploadPhoto', function(){
            $.getJSON('/Ajax/uploadphoto/format/json', function(listePhoto) {
                $.each(listePhoto.listePhoto, function(i, addph){
                    if(addph.result=="false") {
                        $('<tr><td colspan="2"><span>'+ addph.info +'</span></td></tr>').appendTo("#photo-upload table");
                    } else {
                        $('<li class="'+ addph.idPhoto +'"><img src="/galerie/'+ addph.idTourisme +'/'+ addph.Photo +'" title="'+ addph.Descriptif +'"/><span id="'+ addph.idPhoto +'" class="delete-photos">supprimer</span></li>').appendTo("#tabs-7 ul.galerie").fadeIn('slow');
                        $("photo-upload").style.display='none';
                    }
                });
            });
        }, 'html');
    });

AjaxController :

Code:

class AjaxController extends Zend_Controller_Action
{
    public function init()
    {
        $ajaxContext = $this->_helper->getHelper('AjaxContext');
        $ajaxContext->addActionContext('uploadphoto', 'html');
        $ajaxContext->initContext();
    }

public function uploadphotoAction()
    {
        $idTourisme = $this->getRequest()->getPost('id-tourisme');
        $description = $this->getRequest()->getPost('photo-descriptif');
        
        $upload = new Zend_File_Transfer();
        $upload->setDestination($_SERVER['DOCUMENT_ROOT']."/galerie/".$idTourisme);
        $upload->addValidator('Size', false, 3145728)
               ->addValidator('Extension', false, 'jpg,gif,png')
               ->addValidator('MimeType', false, array('image/jpeg', 'image/gif', 'image/png'));
        
        if(!$upload->isValid()) {
            $listePhoto[] = array("result"=>"false", "info"=>"Le fichier sélectionné est incorrect");
            $this->view->listePhoto = Zend_Json::encode($listePhoto);
        } else {
            $upload->receive();
            $fichier = $upload->getFileName();    
            
            $photo = new Model_DbTable_Photo();
            $photo->insertPhoto($idTourisme, $description, $fichier);
            
            $rows = $photo->getLastPhoto($idTourisme);
            
            foreach ($rows as $row) {
                $listePhoto[] = array("result"=>"ok", "idPhoto"=>$row['idPhoto'], "idTourisme"=>$row['idTourisme'], "Photo"=>$row['Photo'], "Descriptif"=>$row['Descriptif']);
            }
            
            $this->view->listePhoto = Zend_Json::encode($listePhoto);
        }
    }

uploadphoto.phtml

Code:

<?php echo $this->listePhoto; ?>

Et voila ce que me renvoie la requête avec Firebug :

Code:

[{"result":"false","info":"Le fichier sélectionné est incorrect"}]

Apparemment ça signifie que le fichier que je veux uploader ne répond pas aux critères de validation. Pourtant mon image est bien dans un des formats autorisés et son poids est en dessous du poids maximum !

Donc voilà ça commence un peu à me prendre la tête cette histoire alors un petit coup de main ne serait pas de refus :p !

Merci d'avance !

Dernière modification par GyZmO (29-07-2010 11:12:57)

ggouhier · 10-08-2010 11:37:04

Tu ne peux pas upload en ajax, c'est impossible...

Cependant il existe une bidouille (gmail l'utilise) qui consiste à passer par une iframe.
Cette méthode revient a posté un formulaire dans une iframe qui va s'occuper de l'upload du fichier, donc aucun rechargement de page.

Je ne me lance pas dans une explication approfondis, ce tutoriel(en) a déjà fait le travail :
http://www.ajaxf1.com/tutorial/ajax-fil … orial.html

Dernière modification par ggouhier (10-08-2010 11:39:31)

GyZmO · 10-08-2010 12:16:38

Oui effectivement, après m'être rendu compte de mon erreur, c'est la méthode que j'ai utilisé !

Merci quand même pour la réponse !

Zend FR

#1 29-07-2010 10:53:22

[ZF1.10] Upload de fichier avec Zend_File et Ajax (jQuery)

Code:

Code:

Code:

Code:

Code:

#2 10-08-2010 11:37:04

Re: [ZF1.10] Upload de fichier avec Zend_File et Ajax (jQuery)

#3 10-08-2010 12:16:38

Re: [ZF1.10] Upload de fichier avec Zend_File et Ajax (jQuery)

Pied de page des forums