ユーザーのローカル デバイス上のファイルの選択と操作は、 ウェブで最もよく使用される機能について説明します。ユーザーはここでファイルや 写真の共有や税金の申告を行う場合などに、写真をサーバーにアップロードする ドキュメントをご覧くださいまた、サイトがコンテンツを一切知らなくても読み取り、操作 ネットワーク経由でデータを転送できますこのページでは、Google Chat で ファイルを操作する JavaScript。
最新の File System Access API
File System Access API は、Google Cloud Storage などのファイルや ユーザーのローカル システム上のすべてのディレクトリに作成されます。Chromium ベースのほとんどの ブラウザで利用できます。詳しくは File System Access API。
File System Access API は一部のブラウザと互換性がないため、 browser-fs-access を使用することをおすすめします。 利用可能なすべての場所で新しい API を使用するヘルパー ライブラリ 従来のアプローチに戻します
従来のやり方でファイルを操作する
このガイドでは、以前の JavaScript メソッドを使用してファイルを扱う方法について説明します。
ファイルを選択
ファイルを選択するには、主に次の 2 つの方法があります。 HTML 入力要素、および エリアをドラッグ&ドロップできます。
HTML 入力要素
ユーザーがファイルを選択する最も簡単な方法は、
<input type="file">
要素です。これは、すべての主要なブラウザでサポートされています。これをクリックすると
ファイルを選択するか、
multiple
オペレーティング システムの組み込みのファイル選択を使用して、
UI です。ユーザーがファイルの選択を終了すると、要素の change
イベントが発生します。event.target.files
のファイルリストにアクセスできます。
FileList
オブジェクトである。
FileList
の各項目は、File
オブジェクトです。
<!-- The `multiple` attribute lets users select multiple files. -->
<input type="file" id="file-selector" multiple>
<script>
const fileSelector = document.getElementById('file-selector');
fileSelector.addEventListener('change', (event) => {
const fileList = event.target.files;
console.log(fileList);
});
</script>
次の例では、ユーザーが操作メニューを使用して複数のファイルを選択 システムに組み込まれているファイル選択 UI で処理し、選択した各ファイルを できます。
ユーザーが選択できるファイルの種類を制限する
ユーザーが選択できるファイルの種類を制限したい場合もあります。対象
たとえば、画像編集アプリは、テキスト ファイルではなく、画像のみを受け入れます。設定
ファイル形式の制限、
accept
属性を input 要素に追加して、受け入れ可能なファイル形式を指定します。
<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">
カスタムのドラッグ&ドロップ
一部のブラウザでは、<input type="file">
要素がドロップ ターゲットでもあります。
ユーザーがアプリにファイルをドラッグ&ドロップできるようにします。ただし このドロップターゲットは
サイズが小さく、使いにくい場合もあります。代わりに、Terraform を使用してコア機能を提供した後、
<input type="file">
要素を使用すると、大きなカスタムのドラッグ&ドロップ機能を
あります。
ドロップゾーンを選択
ドロップ サーフェスは、アプリケーションの設計によって異なります。必要に応じて ドロップ サーフェスになりますが、ウィンドウ全体を使用することもできます。
<ph type="x-smartling-placeholder">画像圧縮アプリの Squoosh では、ユーザーは画像を
[select an image] をクリックして <input type="file">
を呼び出します。
要素です。ドロップゾーンとしてどのゾーンを選んでも、ユーザーがすぐにわかるようにしてください
そのサーフェスにファイルをドラッグできます
ドロップゾーンを定義する
要素をドラッグ&ドロップするゾーンとして有効にするには、
2 つのイベント: dragover
および drop
。
dragover
イベントによってブラウザの UI が更新され、
ファイルのコピーを作成することです。drop
イベントが発生する
ユーザーがファイルを表面にドロップした後です。入力要素と同様に、
event.dataTransfer.files
のファイルのリストにアクセスできます。
FileList
オブジェクト。各
FileList
のアイテムは File
オブジェクトです。
const dropArea = document.getElementById('drop-area');
dropArea.addEventListener('dragover', (event) => {
event.stopPropagation();
event.preventDefault();
// Style the drag-and-drop as a "copy file" operation.
event.dataTransfer.dropEffect = 'copy';
});
dropArea.addEventListener('drop', (event) => {
event.stopPropagation();
event.preventDefault();
const fileList = event.dataTransfer.files;
console.log(fileList);
});
event.stopPropagation()
および event.preventDefault()
ブラウザのデフォルトの動作を停止してコードを実行するようにします。これらのユーザーがいなければ、
そうしないと、ブラウザでページから移動してファイルが開かれ
ブラウザ ウィンドウにドロップします。
ライブデモについては、カスタム ドラッグ&ドロップをご覧ください。
ディレクトリについてはどうでしょうか。
残念ながら、JavaScript を使用してディレクトリにアクセスする良い方法はありません。
webkitdirectory
<input type="file">
要素の属性を使用すると、ユーザーはディレクトリを選択できます。
管理することもできます。主要なブラウザのほとんどでサポートされています。
Android では Firefox、iOS では Safari は除きます。
ドラッグ&ドロップが有効になっている場合、ユーザーはディレクトリを
減らします。ドロップ イベントが発生すると、File
オブジェクトが
ディレクトリ内のファイルへのアクセス権は付与しません。
ファイルのメタデータを読み取る
File
オブジェクトには、ファイルに関するメタデータが含まれます。ほとんどのブラウザ
ファイル名、ファイルのサイズ、MIME タイプを指定します。ただし、
ブラウザによって、異なるデータや追加の情報が提供されることがあります。
情報です。
function getMetadataForFileList(fileList) {
for (const file of fileList) {
// Not supported in Safari for iOS.
const name = file.name ? file.name : 'NOT SUPPORTED';
// Not supported in Firefox for Android or Opera for Android.
const type = file.type ? file.type : 'NOT SUPPORTED';
// Unknown cross-browser support.
const size = file.size ? file.size : 'NOT SUPPORTED';
console.log({file, name, type, size});
}
}
実際の動作は、input-type-file
で確認できます。
説明します。
ファイルの内容を読み取る
FileReader
を使用して以下を行います。
File
オブジェクトのコンテンツをメモリに読み込みます。FileReader
に以下の操作を指示できます
配列バッファとしてファイルを読み取る
データの URL
または text:
function readImage(file) {
// Check if the file is an image.
if (file.type && !file.type.startsWith('image/')) {
console.log('File is not an image.', file.type, file);
return;
}
const reader = new FileReader();
reader.addEventListener('load', (event) => {
img.src = event.target.result;
});
reader.readAsDataURL(file);
}
この例では、ユーザーが指定した File
を読み取り、データに変換します。
そのデータ URL を使用して img
要素内に画像を表示します。
ユーザーが画像ファイルを選択したことを確認する方法については、
read-image-file
のデモ。
ファイルの読み取りの進行状況をモニタリングする
サイズの大きいファイルを読み取るときは、ユーザーに知らせるための UX を用意しておくと便利です。
読み取りがどこまで進んだかを示すそのためには、
progress
FileReader
から提供されたイベント。progress
イベントには次の 2 つのプロパティがあります。
loaded
(読み取り量)と total
(読み取り量)です。
function readFile(file) {
const reader = new FileReader();
reader.addEventListener('load', (event) => {
const result = event.target.result;
// Do something with result
});
reader.addEventListener('progress', (event) => {
if (event.loaded && event.total) {
const percent = (event.loaded / event.total) * 100;
console.log(`Progress: ${Math.round(percent)}`);
}
});
reader.readAsDataURL(file);
}
ヒーロー画像(Vincent Botta 氏、Unsplash より)