Instanciar un objeto de archivo en JavaScript
- Crear una instancia de un archivo para tipos de datos variados en JavaScript
- Tome una imagen para la instanciación de archivos en JavaScript
Un archivo consta de múltiples tipos de datos categorizados similares a un blob. Y nuevamente, un archivo puede tener un tipo específico de documentos.
Podemos almacenar blob, string, array, y muchos más en un archivo. Por lo general, todos estos elementos se definen dentro de un objeto y luego se empaquetan como archivos al crear una instancia.
Aquí haremos algo similar, y se demostrará cómo se puede acceder y mostrar este paquete, también conocido como detalle del archivo. La tarea previa es generar un objeto que queremos tomar como instanciación del archivo.
Más tarde, usaremos algunos métodos para averiguar el tipo, el nombre y el tamaño del archivo. También usaremos un FileReader() para acceder a los detalles de nuestra pila de archivos.
Crear una instancia de un archivo para tipos de datos variados en JavaScript
La especificación W3C File API representa un constructor de archivos con un mínimo de 2 parámetros (y el tercero puede ser opcional). Entonces, los argumentos son los datos u objeto en forma de matriz, el nombre del archivo que queremos seleccionar y, por último, el tipo de archivo y la fecha de modificación se agregan en un formato de objeto.
Este ejemplo tendrá fileDetail, la pila de datos con dos cadenas y dos especificaciones de matriz. Luego crearemos una instancia del constructor File y manipularemos el DOM para mostrar el tamaño, el tipo y el nombre del archivo.
Saltemos al bloque de código.
Fragmento de código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
</body>
</html>
const fileDetail = [
'It\'s a simple string and each character will be countded in the size',
'Second String',
new Uint8Array([10]),
new Uint32Array([2]),
];
const file = new File(
[fileDetail], 'file.txt',
{lastModified: new Date(2022, 0, 5), type: 'text/string and array'});
const fr = new FileReader();
fr.onload = (evt) => {
document.body.innerHTML = `
<p>file name: ${file.name}</p>
<p>file size: ${file.size}</p>
<p>file type: ${file.type}</p>
<p>file last modified: ${new Date(file.lastModified)}</p> `
} fr.readAsText(file);
Producción:
Como puede ver, el objeto fileDetail contiene dos cadenas, y cada uno de los caracteres ocupará un espacio de 1 byte en la memoria.
Cuando hayamos generado el array de 8 bits que también ocupará 1 byte, pero en el caso del array de 32 bits ocupará 4 bytes de espacios. Después de instanciar el Constructor de archivos, se creará una instancia con el nombre file.
El siguiente paso toma otra instancia para FileReader y el método onload manipula el DOM para obtener una vista previa de los detalles. En última instancia, obtenemos el nombre del archivo, el tamaño de los elementos dentro del archivo, el tipo y la fecha de modificación.
Incluso si no usa un formato de matriz en el primer parámetro del constructor de archivos, seguirá funcionando bien.
Tome una imagen para la instanciación de archivos en JavaScript
Aquí, tomaremos una imagen como nuestro elemento de archivo y verificaremos su tipo. En este caso, el tamaño del archivo serán los caracteres de los nombres de las imágenes.
Posteriormente mostraremos los datos relativos al archivo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="orange.jpg">
<p id="size"></p>
<p id="type"></p>
<p id="name"></p>
</body>
</html>
var file = new File(['orange'], 'orange.jpg', {type: 'image/jpg'});
document.getElementById('size').innerHTML = 'File size: ' + file.size;
document.getElementById('type').innerHTML = 'File type: ' + file.type;
document.getElementById('name').innerHTML = 'File name: ' + file.name;
Producción:
