Instanziieren ein file objekt in JavaScript
- Instanziieren eine Datei für verschiedene Datentypen in JavaScript
- Ein Bild für die Dateiinstanziierung in JavaScript nehmen
Eine Datei besteht aus mehreren kategorisierten Datentypen ähnlich einem blob. Und wiederum kann eine Datei eine bestimmte Art von Dokumenten enthalten.
Wir können blob, string, array und viele mehr in einer Datei speichern. Normalerweise werden alle diese Elemente innerhalb eines Objekts definiert und später bei der Instanziierung als Dateien gepackt.
Hier werden wir etwas Ähnliches tun, und es wird demonstriert, wie auf dieses Paket, auch bekannt als Dateidetail, zugegriffen und angezeigt werden kann. Die vorherige Aufgabe besteht darin, ein Objekt zu generieren, das wir als Dateiinstanziierung verwenden möchten.
Später werden wir einige Methoden verwenden, um den Typ, den Namen und die Größe der Datei herauszufinden. Wir werden auch einen FileReader() verwenden, um auf unsere Dateistapeldetails zuzugreifen.
Instanziieren eine Datei für verschiedene Datentypen in JavaScript
Die W3C-Datei-API-Spezifikation beschreibt einen Dateikonstruktor mit mindestens 2 Parametern (und der dritte kann optional sein). Die Argumente sind also die Daten oder das Objekt in Form eines Arrays, der Dateiname, den wir auswählen möchten, und schließlich werden der Dateityp und das Änderungsdatum in einem Objektformat hinzugefügt.
Dieses Beispiel wird fileDetail haben, den Datenstapel mit zwei Strings und zwei Array-Angaben. Dann werden wir den File konstruktor instanziieren und das DOM manipulieren, um die Größe, den Typ und den Namen der Datei anzuzeigen.
Kommen wir zum Codeblock.
Code-Auszug:
<!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);
Ausgabe:
Wie Sie sehen können, enthält das Objekt fileDetail zwei Strings, und jedes der Zeichen belegt einen 1-Byte-Speicherplatz.
Wenn wir das 8-Bit-Array generiert haben, das auch 1 Byte belegt, aber im Fall eines 32-Bit-Arrays 4 Bytes an Leerzeichen benötigt. Nach der Instanziierung des File constructor wird eine Instanz mit dem Namen file erstellt.
Der nächste Schritt nimmt eine weitere Instanz für FileReader und die onload-Methode manipuliert das DOM, um eine Vorschau der Details anzuzeigen. Letztendlich erhalten wir den Dateinamen, die Größe der Elemente in der Datei, den Typ und das Änderungsdatum.
Auch wenn Sie kein Array-Format im ersten Dateikonstruktor-Parameter verwenden, wird es trotzdem gut funktionieren.
Ein Bild für die Dateiinstanziierung in JavaScript nehmen
Hier nehmen wir ein Bild als Füllelement und prüfen seinen Typ. In diesem Fall entspricht die Größe der Datei den Zeichen der Bildnamen.
Später werden wir die Daten bezüglich der Datei anzeigen.
<!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;
Ausgabe:
