Blaze UI es un kit de herramientas de interfaz de usuario de código abierto sin marco que utiliza componentes de JavaScript para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
Este marco nos permite usar varios de sus estilos y propiedades para hacer que un sitio web sea más fácil de usar. Todos los componentes de la interfaz de usuario de Blaze se desarrollan primero para dispositivos móviles y se basan únicamente en las funciones nativas del navegador, no en una biblioteca o marco por separado. Nos ayuda a crear un sitio web escalable y receptivo de manera rápida y eficiente con un estilo consistente.
Blaze UI proporciona funciones para cargar un archivo en el sitio web directamente desde el dispositivo.
- Atributos de carga de archivos de la interfaz de usuario de Blaze: hay tres atributos en la carga de archivos de la interfaz de usuario de Blaze, cada atributo desempeña un papel diferente.
- Blaze UI File Upload CSS: aquí tenemos un tipo básico de carga de archivos y el otro es el área de la zona de colocación.
- Eventos de carga de archivos de la interfaz de usuario de Blaze: hay dos eventos que se pueden usar en la carga de archivos, uno se está cargando y otro se completa.
Hay dos formas de subir archivos a su página web.
- Mediante el uso de la etiqueta blaze-file-upload : podemos crear un campo de carga con la ayuda de la etiqueta/elemento blaze-file-upload .
Sintaxis:
<blaze-file-upload ...> ... </blaze-file-upload>
- Mediante el uso de la clase c-file-upload : hay otra forma de crear un campo de carga con la ayuda de la clase c-file-upload .
Sintaxis:
<div class="c-file-upload"> ... <input type="file" /> </div>
Ejemplo 1: El siguiente ejemplo demostrará cómo puede cargar cualquier archivo en su página web usando la etiqueta blaze-file-upload .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Blaze UI</title>
<link rel="stylesheet"
href="styles.css" />
<script type="module"
src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<script nomodule=""
src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
</script>
<link rel="stylesheet"
href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
<style>
.Logo {
color: green;
}
</style>
</head>
<body>
<center>
<h1 class="Logo">
GeeksforGeeks
</h1>
<h3>
Blaze UI File Upload
</h3>
<blaze-file-upload drop multiple>
Click to upload file
</blaze-file-upload>
</center>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo demostrará cómo puede cargar cualquier archivo en su página web usando la clase c-file-upload .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Blaze UI</title>
<script type="module"
src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<script nomodule=""
src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
</script>
<link rel="stylesheet"
href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
<style>
.Logo {
color: green;
}
</style>
</head>
<body>
<center>
<h1 class="Logo">
GeeksforGeeks
</h1>
<h3>
Blaze UI File Upload using CSS
</h3>
<div class="c-file-upload c-file-upload--drop">
Upload files
<input type="file" />
</div>
</center>
</body>
</html>
Producción:
Enlace de referencia: https://www.blazeui.com/components/file-upload/
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA