Cómo subir imágenes y archivos en CodeEncendedor (con ejemplo)

CodeCarga de archivos de Igniter

La gestión de archivos es esencial para la mayoría de las aplicaciones web. Si eres desarrolladorping Si utilizas un sistema de gestión de contenido, necesitarás poder subir imágenes, documentos de Word, informes en PDF y más. Si trabajas en un sitio de membresía, es posible que debas habilitar la opción para que las personas suban sus imágenes de perfil. CodeLa clase Igniter File Uploading 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 CodeEncendedor

Carga de archivos en CodeEncendedor Consta de dos partes principales: el frontend y el backend. El frontend se gestiona mediante un formulario HTML que utiliza un campo de entrada de tipo archivo. En el backend, la biblioteca de carga de archivos procesa la información enviada desde el formulario y la guarda en el directorio de carga.

Comencemos con el formulario de entrada.

Crea un nuevo directorio llamado files en el directorio application/views.

Agregue los siguientes 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 subida, incluyendo un enlace en el que podemos hacer clic para ver los resultados.

Agregue el siguiente código a 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>

AQUÍ,

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

Agregue el siguiente código a 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 la función de anclaje para crear un enlace al archivo recién subido en el directorio de imágenes. El nombre se obtiene de los metadatos de la imagen que se pasan a la vista cuando el archivo se ha subido correctamente.

Ahora vamos a crear el controlador que responderá a la carga de nuestra imagen.

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

Agregue el siguiente código a 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 permitidas. Esto es importante por motivos de seguridad. Los tipos permitidos garantizan que solo se carguen imágenes y que otros tipos de archivo, como PHP, no se puedan cargar, ya que podrían comprometer la seguridad del servidor.
  • $config['max_size'] = 2000; establece el tamaño máximo del archivo en kilobytes. En nuestro ejemplo, el tamaño máximo de archivo que se puede subir es de 2,000 kb, aproximadamente 2 MB. Si el usuario intenta subir un archivo de más de 2,000 kb, la imagen no se subirá 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 de 1,500 píxeles. Cualquier ancho mayor que ese produce 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.
  • Si (!$this->upload->do_upload('profile_image')) {…} intenta subir la imagen enviada, que en nuestro caso se llama profile_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 en cuanto al controlador. Ahora vamos a crear el directorio donde se subirán nuestras imágenes. Crea un nuevo directorio llamado “imágenes” en el directorio raíz de tu aplicación.

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

Abra application/config/routes.php y agregue las siguientes rutas.

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

AQUÍ,

• $route['upload-image'] = 'imageuploadcontroller'; define el URL método upload-image que llama al método index de ImageUploadController
• $route['store-image'] = 'imageuploadcontroller/store'; define la URL función store-image que acepta el archivo de usuario seleccionado y lo sube al servidor.

Cómo solucionar problemas comunes CodeErrores al cargar archivos en Igniter

La mayoría de los errores de carga muestran un mensaje claro de la biblioteca de carga. La siguiente lista relaciona los errores comunes con sus soluciones.

• El tipo de archivo que intentas subir no está permitido: Agregue la extensión faltante a la configuración allowed_types, por ejemplo 'gif|jpg|png|pdf'.
• El archivo que intentas subir es más grande que el tamaño permitido: Aumenta max_size y confirma que upload_max_filesize y post_max_size en php.ini sean lo suficientemente grandes.
• La ruta de carga no parece ser válida: Crea el directorio upload_path y asegúrate de que el servidor web tenga permisos de escritura sobre él.
• No has seleccionado ningún archivo para subir: Verifique que el nombre de entrada coincida con el argumento do_upload() y que el formulario utilice el tipo de codificación multipart/form-data.

Probando la aplicación

Vamos a iniciar el servidor PHP integrado.

Abre la terminal o la línea de comandos y navega hasta la raíz de tu 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 utilizando el siguiente comando.

php -S localhost:3000

Cargar lo siguiente URL en su navegador web: http://localhost:3000/upload-image

Podrás ver los siguientes resultados.

Haga clic en elegir archivo

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

Selecciona la imagen que desees y luego haz clic en abrir.

El nombre del archivo seleccionado aparecerá en el formulario de carga, como se muestra en la imagen superior. Haga clic en el botón "Subir imagen".

Si todo sale bien, obtendrás los siguientes resultados.

¡Haz clic en el enlace Ver mi imagen!

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

Observe que el nombre de la imagen cargada se muestra en el URLObtuvimos el nombre de la imagen a partir de los metadatos de la imagen subida.

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

Preguntas Frecuentes