Comment télécharger une image et un fichier dans CodeIgniter (avec exemple)

Téléchargement de fichiers CodeIgniter

La gestion des fichiers est essentielle pour la plupart des applications Web. Si vous développez un système de gestion de contenu, vous devrez alors pouvoir télécharger des images, des documents Word, des rapports PDF, etc. Si vous travaillez sur un site d'adhésion, vous devrez peut-être prendre une disposition permettant aux personnes de télécharger leur profil. images. La classe File Uploading de CodeIgniter nous permet de réaliser facilement tout ce qui précède.

Dans ce didacticiel, nous verrons comment utiliser la bibliothèque de téléchargement de fichiers pour charger des fichiers.

Téléchargement d'images dans CodeIgniter

Téléchargement de fichiers dans CodeIgniter comporte deux parties principales. Le front-end et le back-end. Le frontend est géré par le formulaire HTML qui utilise le fichier de type d'entrée du formulaire. Sur le backend, la bibliothèque de téléchargement de fichiers traite l'entrée soumise à partir du formulaire et l'écrit dans le répertoire de téléchargement.

Commençons par le formulaire de saisie.

Créez un nouveau répertoire appelé files dans le répertoire application/views

Ajoutez le suiviwing fichiers dans application/vues/fichiers

  • upload_form.php – cette vue contient le formulaire HTML qui a le type de fichier d’entrée et soumet le fichier sélectionné au serveur pour traitement
  • upload_result.php – cette vue affiche les résultats de l'image téléchargée, y compris un lien sur lequel nous pouvons cliquer pour voir les résultats.


Ajoutez le suiviwing code pour upload_form.php

<!DOCTYPE html>
<html>
<head>
    <title>CodeIgniter Image Upload</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div>
        <h3>Select an image from your computer and upload it to the cloud</h3>
        <?php
                if (isset($error)){
                    echo $error;
                }
            ?>
            <form method="post" action="<?=base_url('store-image')?>" enctype="multipart/form-data">
                <input type="file" id="profile_image" name="profile_image" size="33" />
                <input type="submit" value="Upload Image" />
            </form>
    </div>
</body>
</html>

ICI,

  • if (isset($error)){…} vérifie si la variable d'erreur a été définie. Si le résultat est vrai, l'erreur renvoyée par la bibliothèque de téléchargement est affichée à l'utilisateur.
  • le fichier de type permet à l'utilisateur d'accéder à son ordinateur et de sélectionner un fichier à télécharger.

Annoncez le suivantwing code pour upload_result.php

<!DOCTYPE html>
<html>
<head>
    <title>Image Upload Results</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div>
        <h3>Congratulations, the image has successfully been uploaded</h3>
        <p>Click here to view the image you just uploaded
            <?=anchor('images/'.$image_metadata['file_name'], 'View My Image!')?>
        </p>

        <p>
            <?php echo anchor('upload-image', 'Go back to Image Upload'); ?>
        </p>
    </div>
</body>
</html>

ICI,

  • utilise l'assistant d'ancrage pour créer un lien vers le nouveau fichier téléchargé dans le répertoire images. Le nom est récupéré à partir des métadonnées de l'image qui sont transmises à la vue lorsque le fichier a été téléchargé avec succès.

Créons maintenant le contrôleur qui répondra à notre téléchargement d'image

Ajouter un nouveau fichier ImageUploadController.php dans application/controllers

Ajoutez le suiviwing code vers ImageUploadController.php

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class ImageUploadController extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->helper('url', 'form');
    }

    public function index() {
        $this->load->view('files/upload_form');
    }

    public function store() {
        $config['upload_path'] = './images/';
        $config['allowed_types'] = 'gif|jpg|png';
        $config['max_size'] = 2000;
        $config['max_width'] = 1500;
        $config['max_height'] = 1500;

        $this->load->library('upload', $config);

        if (!$this->upload->do_upload('profile_image')) {
            $error = array('error' => $this->upload->display_errors());

            $this->load->view('files/upload_form', $error);
        } else {
            $data = array('image_metadata' => $this->upload->data());

            $this->load->view('files/upload_result', $data);
        }
    }

}

ICI,

  • class ImageUploadController extends CI_Controller {…} définit notre classe de contrôleur et étend le contrôleur de base CI_Controller
  • public function __construct() {…} initialise la méthode constructeur parent et charge l'URL et les assistants de formulaire
  • public function index() {…} définit la méthode d'index utilisée pour afficher le formulaire de téléchargement d'image
  • public function store() {…} définit la méthode qui téléchargera l'image et la stockera sur le serveur d'applications Web.
    • $config['upload_path'] = './images/'; définit le répertoire dans lequel les images doivent être téléchargées
    • $config['allowed_types'] = 'gif|jpg|png'; définit les extensions de fichiers acceptables. Ceci est important pour des raisons de sécurité. Les types autorisés garantissent que seules les images sont téléchargées et que les autres types de fichiers tels que php ne peuvent pas être téléchargés car ils risquent de compromettre le serveur.
    • $config['max_size'] = 2000 ; définir la taille maximale du fichier en kilo-octets. Dans notre exemple, le fichier maximum pouvant être téléchargé est de 2,000 2 Ko, soit près de 2,000 Mo. Si l'utilisateur tente de télécharger un fichier de plus de Ko, le téléchargement de l'image échouera et la bibliothèque renverra un message d'erreur.
    • $config['max_width'] = 1500 ; définit la largeur maximale de l'image qui dans notre cas est de 1,500 px. Toute largeur supérieure à cela entraîne une erreur
    • $config['max_hauteur'] = 1500 ; définit la hauteur maximale acceptable.
    • $this->load->library('upload', $config); charge la bibliothèque de téléchargement et l'initialise avec le tableau $config que nous avons défini ci-dessus.
    • if (!$this->upload->do_upload('profile_image')) {…} tente de télécharger l'image soumise qui dans notre cas est nommée profile_image
    • $erreur = array('erreur' => $this->upload->display_errors()); définit le message d'erreur si le téléchargement échoue
    • $this->load->view('files/upload_form', $error); charge le formulaire de téléchargement de fichiers et affiche le message d'erreur renvoyé par la bibliothèque de téléchargement
    • $data = array('image_metadata' => $this->upload->data()); définit les métadonnées de l'image si le téléchargement a réussi
    • $this->load->view('files/upload_result', $data); charge la vue téléchargée avec succès et transmet les métadonnées du fichier téléchargé.

C'est tout pour le contrôleur. Créons maintenant le répertoire dans lequel nos images seront téléchargées. Créez un nouveau répertoire « images » dans le répertoire racine de votre application

Enfin, nous ajouterons deux routes à notre fichier routes.php qui affichera le formulaire et affichera les résultats.

Open application/config/routes.php
Add the following routes
$route['upload-image'] = 'imageuploadcontroller';
$route['store-image'] = 'imageuploadcontroller/store';

ICI,

  • $route['upload-image'] = 'imageuploadcontroller'; définit l'URL de téléchargement de l'image qui appelle la méthode d'index de ImageUploadController
  • $route['store-image'] = 'imageuploadcontroller/store'; définit l'URL de l'image de magasin qui accepte le fichier utilisateur sélectionné et le télécharge sur le serveur.

Tester l'application

Commençons le serveur PHP intégré

Ouvrez le terminal/ligne de commande et accédez à la racine de votre application. Dans mon cas, la racine se trouve dans le lecteur C:\Sites\ci-app

cd C:\Sites\ci-app

démarrez le serveur en utilisant le followwing commander

php -S localhost:3000

Chargez le suiviwing URL dans votre navigateur Web : http://localhost:3000/upload-image

vous pourrez voir la suitewing de projets

Téléchargement d'images dans CodeIgniter

Cliquez sur choisir un fichier

Vous devriez pouvoir voir une fenêtre de dialogue similaire à celle-ci.wing

Téléchargement d'images dans CodeIgniter

Sélectionnez l'image souhaitée puis cliquez sur ouvrir

Téléchargement d'images dans CodeIgniter

Le nom du fichier sélectionné apparaîtra dans le formulaire de téléchargement, comme indiqué dans l'image ci-dessus. Cliquez sur un bouton de téléchargement d'image

Vous obtiendrez le suiviwing résultats en supposant que tout se passe bien

Téléchargement d'images dans CodeIgniter

Cliquez sur Voir mon image ! Lien

Vous devriez pouvoir voir l'image que vous avez téléchargée. Les résultats seront similaires à ceux suivantswing

Téléchargement d'images dans CodeIgniter

Remarquez que le nom de l'image téléchargée est affiché dans l'URL. Nous avons obtenu le nom de l'image à partir des métadonnées de l'image téléchargée

Remarque : Le processus de téléchargement de fichiers reste le même pour les autres types de fichiers.