Cargar archivo CodeIgniter
La administración de archivos es esencial para la mayoría de las aplicaciones web. Si está desarrollando un sistema de gestión de contenido, deberá poder cargar imágenes, documentos de Word, informes en PDF, etc. Si está trabajando en un sitio de membresía, es posible que deba permitir que las personas carguen sus imágenes de perfil. La clase CodeIgniter File Upload nos facilita hacer todo lo anterior.
En este tutorial, veremos cómo usar la biblioteca de carga de archivos para cargar archivos.
Cargar imágenes en CodeIgniter
Cargar un archivo en CodeIgniter tiene dos partes principales. El frontend y el backend. El formulario HTML maneja la interfaz utilizada por el archivo de tipo de entrada de formulario. Los fines de semana, 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 de aplicaciones / comentarios
Agregue los siguientes archivos a la aplicación / comentarios / archivos
- upload_form.php: contiene el formulario HTML que contiene el tipo de entrada de archivo 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.
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('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)) {…} compruebe si la variable de error está establecida. Si el resultado es verdadero, se muestra el error que la biblioteca de carga devolvió al usuario.
- el tipo de archivo permite al usuario navegar en su computadora y seleccionar un archivo para cargar.
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Í,
- El ayudante de anclaje para crear un enlace al archivo recién subido en el directorio de imágenes. El nombre se deriva de los metadatos de la imagen que se reenvía a la vista cuando el archivo se ha cargado correctamente.
Ahora creamos el controlador que responderá a la carga de nuestra imagen.
Agregue un nuevo archivo ImageUploadController.php a la 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Í,
- imageUploadController class extendiendo CI_Controller {…} define nuestra clase de controlador y extiende el controlador inferior CI_Controller
- La función pública __construct () {…} inicia el modo principal y carga URL y ayudantes de formulario.
- public function index () {…} define el método de índice utilizado para mostrar el formulario de carga de imágenes
- repositorio de función pública () {…} define el método mediante el cual la imagen se cargará y 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 ‘; se definen 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 la capacidad de comprometer el servidor.
- $ config[‘max_size’] = 2000; establezca el tamaño máximo de archivo en kilovatios. En nuestro ejemplo, el archivo máximo que se puede cargar es de 2000 kb cerca de 2 MB. Si el usuario intenta cargar un archivo de más de 2.000 kb, la imagen no dejará de cargarse y la biblioteca enviará un mensaje de error.
- $ config[‘max_width’] = 1500; el ancho máximo de la imagen se establece en 1.500 px en nuestro caso. Cualquier ancho mayor que ese da como resultado un error
- $ config[‘max_height’] = 1500; se define la altura máxima aceptable.
- biblioteca $ this-> load-> (‘upload’, $ config); carga la biblioteca de carga y comienza con la matriz $ que definimos anteriormente.
- if (! $ this-> upload-> do_upload (‘profile_image’)) {…} intenta cargar la imagen enviada llamada Prof_image en nuestro caso
- $ error = array (‘error’ => $ this-> upload-> display_errors ()); corrige el mensaje de error si falla la carga
- $ this-> load-> 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 = matriz (‘image_metadata’ => $ esto-> subir-> datos ()); establece los metadatos de la imagen si la carga fue exitosa
- $ this-> load-> view (‘archivos / upload_result’, $ datos); la vista cargada se carga correctamente y pasa los metadatos del archivo cargado.
Eso es para el controlador. Ahora creamos el directorio donde se cargarán nuestras imágenes. Cree un nuevo directorio de «imágenes» en el directorio raíz de su aplicación
Finalmente, le daremos dos formas a nuestro archivo routes.php que mostrará el formulario y mostrará los resultados.
Open application/config/routes.php Add the following routes $route['upload-image'] = 'imageuploadcontroller'; $route['store-image'] = 'imageuploadcontroller/store';
AQUÍ,
- $ camino[‘upload-image’] = ‘imageuploadcontroller’; la URL de carga de la imagen se define como el método de índice ImageUploadController
- $ camino[‘store-image’] = ‘imageuploadcontroller / store’; Se define una imagen de repositorio de URL que acepta el archivo de usuario seleccionado y lo carga en el servidor.
Prueba la aplicación
Comencemos con 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:Sitesci-app
inicie el servidor usando el siguiente comando
php -S localhost:3000
Cargue la siguiente URL en su navegador web
http: // localhost: 3000 / upload-image
podrás ver los siguientes resultados
Haga clic en seleccionar archivo
Debería poder ver una ventana de diálogo similar a la siguiente
Seleccione la imagen que desee y luego haga clic en abrir
El nombre del archivo seleccionado se mostrará en el formulario de carga como se muestra en la imagen de arriba. Haga clic en el botón cargar imagen
Obtendrá los siguientes resultados asumiendo que todo va bien
¡Haga clic en Ver mi imagen! Enlace
Debería poder ver la imagen que cargó. Los resultados serán similares a los siguientes
El nombre de una imagen cargada se muestra en la URL. Obtuvimos el nombre de la imagen de los metadatos de la imagen cargada.
Nota: El proceso de carga de archivos es el mismo para otros tipos de archivos.