Instancier un objet fichier en JavaScript
- Instancier un fichier pour divers types de données en JavaScript
- Prendre une image pour l’instanciation de fichier en JavaScript
Un fichier se compose de plusieurs types de données catégorisés similaires à un blob. Et encore une fois, un dossier peut avoir un type spécifique de documents.
Nous pouvons stocker blob, string, array et bien d’autres dans un fichier. Habituellement, tous ces éléments sont définis dans un objet et ensuite emballés sous forme de fichiers lors de l’instanciation d’un.
Ici, nous allons faire quelque chose de similaire, et comment ce paquet, alias le détail du fichier, peut être consulté et affiché sera démontré. La tâche préalable consiste à générer un objet que nous voulons prendre comme instanciation de fichier.
Plus tard, nous utiliserons certaines méthodes pour déterminer le type, le nom et la taille du fichier. Nous utiliserons également un FileReader() pour accéder aux détails de notre pile de fichiers.
Instancier un fichier pour divers types de données en JavaScript
La spécification W3C File API décrit un constructeur de fichier avec un minimum de 2 paramètres (et le 3ème peut être facultatif). Ainsi, les arguments sont les données ou l’objet sous la forme d’un tableau, le nom du fichier que nous voulons sélectionner, et enfin, le type de fichier et la date de modification sont ajoutés dans un format objet.
Cet exemple aura fileDetail, la pile de données avec deux chaînes et deux spécifications de tableau. Ensuite nous allons instancier le constructeur File et manipuler le DOM pour afficher la taille, le type, le nom du fichier.
Passons au bloc de code.
Extrait de code:
<!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);
Production :
Comme vous pouvez le voir, l’objet fileDetail contient deux chaînes, et chacun des caractères occupera un espace de 1 octet dans la mémoire.
Lorsque nous avons généré le tableau de 8 bits qui occupera également 1 octet, mais dans le cas d’un tableau de 32 bits, il faudra 4 octets d’espaces. Après avoir instancié le constructeur de fichier, une instance sera créée avec le nom file.
L’étape suivante prend une autre instance pour FileReader et la méthode onload manipule le DOM pour prévisualiser les détails. En fin de compte, nous obtenons le nom du fichier, la taille des éléments à l’intérieur du fichier, le type et la date de modification.
Même si vous n’utilisez pas de format de tableau dans le premier paramètre du constructeur de fichier, cela fonctionnera toujours correctement.
Prendre une image pour l’instanciation de fichier en JavaScript
Ici, nous allons prendre une image comme élément fil et vérifier son type. Dans ce cas, la taille du fichier sera les caractères des noms des images.
Plus tard, nous afficherons les données concernant le fichier.
<!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;
Production :
