​KCFinder, un gestionnaire d'upload gratuit

Vous êtes à la recherche d'un gestionnaire d'upload performant (KCFinder), gratuit et pas trop chiant à installer, alors vous êtes au bon endroit :).
Dans ce tutoriel, je vais vous montrer comment installer KCFinder sur votre site.
KCFinder

Que permet KCFinder sans être exhaustif ?
  • Uploader un ou des fichiers/images.
  • Télécharger des fichiers par glisser-déposer.
  • Sélectionner plusieurs fichiers avec la touche Ctrl.
  • Filigrane.
  • Création de miniatures.
  • Renommer/supprimer les fichiers.
  • Aperçu des images.
  • Création de répertoires.
  • Etc.
Dans un premier temps, assurez-vous que votre hébergement est bien sous PHP 5.3 minimum sinon ça ne fonctionnera pas ! Ceci fait, téléchargez le logiciel sur le site de l'auteur http://kcfinder.sunhater.com/ que vous prenez soin de dézziper (je préfère préciser ^^). Vous devez obtenir un dossier nommé "kcfinder" avec différent dossiers et fichiers à l'intérieur. Pour cet exemple, le dossier "kcfinder" sera ensuite placé à la racine de votre site.

Dans un fichier nommé pour l'exemple "index.php" et qui sera aussi à placer à la racine de votre site, copier/coller l'ensemble du code ci-dessous :
<?php
    //Ouverture de session
    session_start();
    //Tableau de sessions
    $_SESSION['KCFINDER'] = array();
    //Autorisation de l'upload
    $_SESSION['KCFINDER']['disabled'] = false;    
?>

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript">
            function openKCFinder(field) {
                window.KCFinder = {
                    callBack: function(url) {
                        field.value = url;
                        window.KCFinder = null;
                    }
                };
                //ouverture du popup d'upload
                window.open('kcfinder/browse.php?type=files&dir=files/public&lang=fr', 'kcfinder_textbox',
                'status=0, toolbar=0, location=0, menubar=0, directories=0, ' +
                'resizable=1, scrollbars=0, width=800, height=600'
                );
            }
        </script>
    </head>
    
    <body>
                
        <form name="monform" method="post">
            <input name="miniature" type="text" readonly="readonly" onclick="openKCFinder(this)" value="" placeholder="Cliquer ici" style="width:600px;cursor:pointer" />
            <input type="submit" name="valider" value="valider" />
        </form>

    </body>
</html>
Là, le gestionnaire d'upload est fonctionnel et vous permet d'uploader des documents sans contraintes.

Si vous êtes novice, vous vous demandez certainement comment afficher l'image uploadé directement sur votre page et comment récupérer la variable de l'image pour l'enregistrer ensuite en base de données .. vous allez voir, c'est très simple et tout est commenté dans le code suivant.
<?php
    //Ouverture de session
    session_start();
    //Tableau de sessions
    $_SESSION['KCFINDER'] = array();
    //Autorisation de l'upload
    $_SESSION['KCFINDER']['disabled'] = false;    
?>

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript">
            function openKCFinder(field) {
                window.KCFinder = {
                    callBack: function(url) {
                        field.value = url;
                        //on place l'url de l'image dans une variable
                        var image = '<img src="'+field.value+'" />';
                        //on affiche l'image dans le div concerné » (illustration)
                        document.getElementById('illustration').innerHTML = image;
                        window.KCFinder = null;
                    }
                };
                //ouverture du popup d'upload
                window.open('kcfinder/browse.php?type=files&dir=files/public&lang=fr', 'kcfinder_textbox',
                'status=0, toolbar=0, location=0, menubar=0, directories=0, ' +
                'resizable=1, scrollbars=0, width=800, height=600'
                );
            }
        </script>
    </head>
    
    <body>
        
        <?php
            //si action de valider le formulaire
            if(isset($_POST["valider"])){
                //si le champ n'est pas vide
                if($_POST["miniature"] != null){
                    //on affiche l'url de l'image
                    echo $_POST["miniature"];
                }
                //si le champ est vide
                else{
                    echo "Fichier absent !";
                }
            }
        ?>
        
        <form name="monform" method="post">
            <input name="miniature" type="text" readonly="readonly" onclick="openKCFinder(this)" value="" placeholder="Cliquer ici" style="width:600px;cursor:pointer" />
            <input type="submit" name="valider" value="valider" />
        </form>
        
        <div id="illustration"><?php 
            //si la variable existe et qu'elle n'est pas vide
            if(isset($_POST["miniature"]) && $_POST["miniature"] != null){ 
                //on affiche l'image
                echo '<img src="'.$_POST["miniature"].'"/>';
            }
        ?></div>

    </body>
</html>
Pour finir et si vous souhaitez uploader vos documents dans un dossier bien précis, il suffit de le spécifier dans une nouvelle variable de session qui devra être placé à la suite des autres. Par exemple pour uploader des images dans un dossier nommé "toto" se trouvant dans le dossier "upload" de KCFinder :
$_SESSION['KCFINDER']['uploadURL'] = "/kcfinder/upload/toto"; 
Soit :
<?php
    //Ouverture de session
    session_start();
    //Tableau de sessions
    $_SESSION['KCFINDER'] = array();
    //Autorisation de l'upload
    $_SESSION['KCFINDER']['disabled'] = false;    
    //upload dans un répertoire bien précis
    $_SESSION['KCFINDER']['uploadURL'] = "/kcfinder/upload/toto";     
?>
L'avantage de cette dernière, c'est qu'elle permet de créer le dossier d'upload (toto) automatiquement sur votre serveur...
Voir/déposer un commentaire (0) | Signaler un problème