JavaScript でファイルオブジェクトをインスタンス化する
ファイルは、blob に似た複数の分類されたデータ型で構成されています。また、ファイルには特定の種類のドキュメントを含めることができます。
blob、string、array などをファイルに保存できます。通常、これらのアイテムはすべてオブジェクト内で定義され、後でインスタンス化するときにファイルとしてパックされます。
ここでは、同様のことを行い、このパッケージ、別名ファイルの詳細にアクセスして表示する方法を示します。前のタスクは、ファイルのインスタンス化として取得するオブジェクトを生成することです。
後で、いくつかのメソッドを使用して、ファイルのタイプ、名前、およびサイズを把握します。また、FileReader() を使用してファイルスタックの詳細にアクセスします。
JavaScript でさまざまなデータ型のファイルをインスタンス化する
W3C File API 仕様は、最低 2つのパラメーターを持つファイルコンストラクターを示しています（3つ目はオプションです）。したがって、引数は配列形式のデータまたはオブジェクトであり、選択するファイル名であり、最後に、ファイルタイプと変更日がオブジェクト形式で追加されます。
この例には、2つの文字列と 2つの配列仕様を持つデータパイルである fileDetail が含まれます。次に、File コンストラクターをインスタンス化し、DOM を操作して、ファイルのサイズ、タイプ、名前を表示します。
コードブロックに飛び乗ってみましょう。
コードスニペット：
<!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);
出力：
ご覧のとおり、fileDetail オブジェクトは 2つの文字列を保持し、各文字はメモリ内で 1 バイトのスペースを占有します。
これも 1 バイトを占める 8 ビットの配列を生成した場合、32 ビットの配列の場合は 4 バイトのスペースが必要になります。ファイルコンストラクターをインスタンス化した後、ファイルという名前でインスタンスが作成されます。
次のステップでは、FileReader の別のインスタンスを取得し、onload メソッドが DOM を操作して詳細をプレビューします。最終的に、ファイル名、ファイル内の要素のサイズ、タイプ、および変更日を取得します。
最初のファイルコンストラクターパラメーターで配列形式を使用しない場合でも、正常に機能します。
JavaScript でファイルインスタンス化のために画像を撮る
ここでは、fil 要素として画像を取得し、そのタイプを確認します。この場合、ファイルのサイズは画像の名前の文字になります。
後で、ファイルに関するデータを表示します。
<!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;
出力：
