¡Descarga Como cargar imagen con java script a base de datos sql y más Guías, Proyectos, Investigaciones en PDF de Tecnologías de la Información y la Comunicación solo en Docsity!
PROCESO DE GESTIÓN DE FORMACIÓN PROFESIONAL INTEGRAL
FORMATO GUÍA DE APRENDIZAJE – MATERIAL DE APOYO
CONEXIÓN A BASES DE DATOS DESDE PYTHON
Material Apoyo Cargar Imágenes de los Productos Continuando con el proyecto de la Aplicación web de la Tienda vamos a revisar como cargar al servidor una imagen de cada producto a la hora de registrar un producto. Para iniciar se recomienda instalar la librería WERKZEUG , para utilizarla en lo relacionado con información de los archivos que se cargan al servidor. En el archivo Python importar la librería werkzeug y os para el tratamiento de archivos. Agregar al código del archivo app.py la siguiente configuración para indicar cuál es la carpeta donde se van a cargar las fotos de los productos.
Modificar la función de agregar un producto en la aplicación así: En el cuadrio rojo está el código que recibe de la vista un campo llamado fileFoto que representa la imagen del producto la cuál la debemos cargar al servidor. Ahora hay que modificar el html del formulario que permite agregar el producto para incorporar un control de tipo file así: Y en la parte del encabezado del formulario agregar la propiedad enctype así:
En el código anterior se agregar dos columnas: una para mostrar la imagen y otra para realizar dos acciones de las cuales una es para editar y la otra para eliminar. En la línea 31 de la imagen podemos ver como agregamos en la columna de la tabla un elemento html img para mostrar la imagen, teniendo en cuenta que la imagen de cada producto tiene como nombre el código del producto con la extensión.jpg. Visualmente se ibserva así: Proceso Eliminar un producto Sin ustedes observan en la línea 24 de la siguiente imagen, se está agregando un evento click al elemento el cual llama a una función eliminar donde se pasa el código del producto. Dicha función eliminar debe estar en un archivo javascript.
Código en el archivo app.js La función eliminar abre una ventana modal la cual tiene un botón con una etiqueta a con un id llamado rutaEliminar el cual se modifica para que al dar clic llame a la ruta llamada eliminar.
Proceso Editar el Producto: En el formulario del editar el producto también se agrega un campo de tipo file así como se realizó en el formulario de agregar. Al formulario se le agregó un campo oculto para guardar ahí el código del producto por si se modifica también el código.
Código proceso editar el producto en el archivo app.py: Si al actualizar sube una nueva imagen, se elimina la que hay y se carga una nueva. Si no cambia el código del producto pero si sube una nueva imagen entonces se renombra el archivo.
