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

CodeTéléchargement de fichiers Igniter

La gestion des fichiers est essentielle pour la plupart des applications web. Si vous êtes développeur…ping Si vous utilisez un système de gestion de contenu, vous devrez 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 prévoir la possibilité pour les membres de télécharger leur photo de profil. CodeLa classe Igniter File Uploading nous facilite grandement la tâche pour réaliser 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 Codeallumeur

Téléchargement de fichiers dans Codeallumeur L'application comporte deux parties principales : l'interface utilisateur et le serveur. L'interface utilisateur est gérée par le formulaire HTML qui utilise le type d'entrée `<input type type>`. Côté serveur, la bibliothèque de téléchargement de fichiers traite les données soumises via le formulaire et les enregistre 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 les fichiers suivants dans application/views/files

• 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 on peut cliquer pour afficher les résultats.

Ajoutez le code suivant à 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(0)?>" 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,

• La fonction `if (isset($error)){…}` vérifie si la variable d'erreur a été définie. Si c'est le cas, l'erreur renvoyée par la bibliothèque d'upload est affichée à l'utilisateur.
• Le type de fichier permet à l'utilisateur de parcourir son ordinateur et de sélectionner un fichier à télécharger.

Ajoutez le code suivant à 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 fichier nouvellement téléchargé dans le répertoire des images. Le nom est extrait des métadonnées de l'image transmises à la vue une fois le téléchargement du fichier réussi.

Créons maintenant le contrôleur qui répondra au téléchargement de notre image.

Ajouter un nouveau fichier ImageUploadController.php dans application/controllers

Ajoutez le code suivant à 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
  • La ligne `$config['allowed_types'] = 'gif|jpg|png';` définit les extensions de fichiers autorisées. 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 d'autres types de fichiers, tels que les fichiers PHP, ne peuvent pas l'être, car ils pourraient compromettre le serveur.
  • La variable `$config['max_size'] = 2000;` définit la taille maximale des fichiers en kilo-octets. Dans notre exemple, la taille maximale autorisée est de 2 000 ko, soit environ 2 Mo. Si l'utilisateur tente de télécharger un fichier de plus de 2 000 ko, le téléchargement échouera et la bibliothèque affichera un message d'erreur.
  • La variable `$config['max_width'] = 1500;` définit la largeur maximale de l'image, qui est de 1 500 px dans notre cas. Toute largeur supérieure à cette valeur entraînera 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é.

Voilà pour le contrôleur. Créons maintenant le répertoire où seront téléchargées nos images. Créez un nouveau répertoire « images » à la racine de votre application.

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

Ouvrez le fichier application/config/routes.php et ajoutez les routes suivantes

$route['upload-image'] = 'imageuploadcontroller';
$route['store-image'] = 'imageuploadcontroller/store';

ICI,

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

Comment réparer les problèmes courants CodeErreurs de chargement de fichiers Igniter

La plupart des échecs de chargement renvoient un message clair de la bibliothèque de chargement. La liste ci-dessous répertorie les erreurs courantes et leurs solutions.

• Le type de fichier que vous essayez de télécharger n'est pas autorisé : Ajoutez l'extension manquante à la configuration allowed_types, par exemple 'gif|jpg|png|pdf'.
• Le fichier que vous essayez de télécharger est plus volumineux que la taille autorisée : Augmentez la valeur de max_size et vérifiez que upload_max_filesize et post_max_size dans php.ini sont suffisamment élevés.
• Le chemin de téléchargement ne semble pas être valide : Créez le répertoire upload_path et assurez-vous que le serveur web dispose des droits d'écriture sur celui-ci.
• Vous n'avez pas sélectionné de fichier à télécharger : Vérifiez que le nom du champ de saisie correspond à l'argument de do_upload() et que le formulaire utilise l'enctype multipart/form-data.

Tester l'application

Commençons par démarrer le serveur PHP intégré.

Ouvrez le terminal ou l'invite de commandes et accédez au répertoire racine de votre application. Dans mon cas, il se trouve sur le lecteur C:\Sites\ci-app.

cd C:\Sites\ci-app

Démarrez le serveur à l'aide de la commande suivante

php -S localhost:3000

Charger les éléments suivants URL dans votre navigateur Web : http://localhost:3000/upload-image

Vous pourrez constater les résultats suivants

Cliquez sur choisir un fichier

Vous devriez pouvoir voir une fenêtre de dialogue similaire à la suivante

Sélectionnez l'image souhaitée, puis cliquez sur Ouvrir

Le nom du fichier sélectionné s'affichera dans le formulaire de téléchargement, comme illustré ci-dessus. Cliquez sur le bouton « Téléverser une image ».

Vous obtiendrez les résultats suivants, si tout se passe bien.

Cliquez sur le lien « Voir mon image ! »

Vous devriez pouvoir voir l'image que vous avez téléchargée. Le résultat sera similaire à ce qui suit.

Notez que le nom de l'image téléchargée est affiché dans le URLNous avons récupéré le nom de l'image à partir des métadonnées de l'image téléchargée.

Remarque : La procédure de téléchargement de fichiers reste la même pour les autres types de fichiers.

FAQ