Cómo cargar imágenes y archivos en CodeIgniter (con ejemplo)

Carga de archivos CodeIgniter

La gestión de archivos es esencial para la mayoría de las aplicaciones web. Si está desarrollando un sistema de gestión de contenidos, necesitará poder cargar imágenes, documentos de Word, informes en PDF, etc. Si está trabajando en un sitio de membresía, es posible que deba tomar medidas para que las personas carguen su perfil. imágenes. La clase de carga de archivos de CodeIgniter nos facilita hacer todo lo anterior.

En este tutorial, veremos cómo usar la biblioteca de carga de archivos para cargar archivos.

Subir imágenes en CodeIgniter

Carga de archivos en CodeIgniter tiene dos partes principales. El frontend y el backend. La interfaz es manejada por el formulario HTML que utiliza el archivo de tipo de entrada del formulario. En el backend, la biblioteca de carga de archivos procesa la entrada enviada desde el formulario y la escribe en el directorio de carga.

Comencemos con el formulario de entrada.

Cree un nuevo directorio llamado archivos en el directorio aplicación/vistas

Agrega el siguientewing archivos en aplicación/vistas/archivos

  • upload_form.php: esta vista contiene el formulario HTML que tiene el tipo de archivo de entrada y envía el archivo seleccionado al servidor para su procesamiento.
  • upload_result.php: esta vista muestra los resultados de la imagen cargada, incluido un enlace en el que podemos hacer clic para ver los resultados.


Agrega el siguientewing código para 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>

AQUÍ,

  • if (isset($error)){…} comprueba si se ha configurado la variable de error. Si el resultado es verdadero, se muestra el error devuelto por la biblioteca de carga.yed para el usuario.
  • el tipo de archivo permite al usuario navegar hasta su computadora y seleccionar un archivo para cargar.

Anuncio el siguientewing código para 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>

AQUÍ,

  • utiliza el asistente de anclaje para crear un enlace al nuevo archivo cargado en el directorio de imágenes. El nombre se recupera de los metadatos de la imagen que se pasan a la vista cuando el archivo se carga correctamente.

Creemos ahora el controlador que responderá a la carga de nuestras imágenes.

Agregue un nuevo archivo ImageUploadController.php en aplicación/controladores

Agrega el siguientewing código para 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);
        }
    }

}

AQUÍ,

  • class ImageUploadController extiende CI_Controller {…} define nuestra clase de controlador y extiende el controlador base CI_Controller
  • La función pública __construct() {…} inicializa el método constructor principal y carga la URL y los ayudantes del formulario.
  • función pública index() {…} define el método de índice que se utiliza para mostrar el formulario de carga de imágenes
  • La función pública store() {…} define el método que cargará la imagen y la almacenará en el servidor de aplicaciones web.
    • $config['upload_path'] = './images/'; establece el directorio donde se deben cargar las imágenes
    • $config['allowed_types'] = 'gif|jpg|png'; define las extensiones de archivo aceptables. Esto es importante por razones de seguridad. Los tipos permitidos garantizan que solo se carguen imágenes y que no se puedan cargar otros tipos de archivos como php porque tienen el potencial de comprometer el servidor.
    • $config['max_size'] = 2000; establezca el tamaño máximo de archivo en kilobytes. En nuestro ejemplo, el archivo máximo que se puede cargar es de 2,000 kb, cerca de 2 MB. Si el usuario intenta cargar un archivo de más de 2,000 kb, la imagen no se cargará y la biblioteca devolverá un mensaje de error.
    • $config[‘max_width’] = 1500; establece el ancho máximo de la imagen que en nuestro caso es 1,500 px. Cualquier ancho mayor que ese resulta en un error
    • $config[‘max_height’] = 1500; define la altura máxima aceptable.
    • $this->cargar->biblioteca('cargar', $config); carga la biblioteca de carga y la inicializa con la matriz $config que definimos anteriormente.
    • if (!$this->upload->do_upload('profile_image')) {...} intenta cargar la imagen enviada que en nuestro caso se llama perfil_image
    • $error = array(‘error’ => $this->upload->display_errors()); establece el mensaje de error si la carga falla
    • $this->cargar->view('archivos/upload_form', $error); carga el formulario de carga de archivos y muestra el mensaje de error que se devuelve desde la biblioteca de carga
    • $datos = array('image_metadata' => $this->upload->data()); establece los metadatos de la imagen si la carga se ha realizado correctamente
    • $this->cargar->view('archivos/upload_result', $datos); carga la vista cargada correctamente y pasa los metadatos del archivo cargado.

Eso es todo por el controlador. Creemos ahora el directorio donde se cargarán nuestras imágenes. Cree un nuevo directorio “imágenes” en el directorio raíz de su aplicación

Finalmente, agregaremos dos rutas a nuestro archivo route.php que mostrarán el formulario y mostrarán los resultados.

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

AQUÍ,

  • $ruta['upload-image'] = 'imageuploadcontroller'; define la URL de carga de imagen que llama al método de índice de ImageUploadController
  • $ruta['store-image'] = 'imageuploadcontroller/store'; define la URL de la tienda-imagen que acepta el archivo de usuario seleccionado y lo carga en el servidor.

Probando la aplicación

Iniciemos el servidor PHP integrado.

Abra la terminal/línea de comando y busque la raíz de su aplicación. En mi caso, la raíz se encuentra en la unidad C:\Sites\ci-app

cd C:\Sites\ci-app

inicie el servidor usando el siguientewing comando

php -S localhost:3000

Cargar el siguientewing URL en su navegador web: http://localhost:3000/upload-image

podrás ver el siguientewing dE TRATAMIENTOS

Subir imágenes en CodeIgniter

Haga clic en elegir archivo

Debería poder ver una ventana de diálogo similar a la siguientewing

Subir imágenes en CodeIgniter

Seleccione la imagen que desee y luego haga clic en abrir

Subir imágenes en CodeIgniter

El nombre del archivo seleccionado aparecerá en la carga del formulario como se muestra en la imagen de arriba. Haga clic en el botón de cargar una imagen

Obtendrás el siguientewing resultados suponiendo que todo va bien

Subir imágenes en CodeIgniter

¡Haga clic en Ver mi imagen! Enlace

Deberías poder ver la imagen que subiste. Los resultados serán similares a los siguientes.wing

Subir imágenes en CodeIgniter

Aviso que se muestra el nombre de la imagen cargada.yed en la URL. Obtuvimos el nombre de la imagen de los metadatos de la imagen cargada.

Nota: El proceso de carga de archivos sigue siendo el mismo para otros tipos de archivos.