戻る

ファイル選択ダイアログ
ファイル選択ダイアログ

ファイル選択ダイアログが開き、選択されたファイルを取得する処理です。
クリックするとファイル選択ダイアログが開きます。
選択されたファイルはFileオブジェクトとしてchangeイベント内で取得できます。


[サンプル]
copy
document.getElementById('fileInput').addEventListener('change', function(event) 
{
	const files = event.target.files;
	if (files.length > 0) 
	{
		const selectedFile = files[0];
		console.log('choose filename:', selectedFile.name);
		console.log('choose file type:', selectedFile.type);
		console.log('file size:', selectedFile.size);
	}
});

<input type="file" id="fileInput" style="display: none;">
input要素のtype属性をfileに設定します。
display: none;
input要素を非表示にする設定です。
const files = event.target.files;
選択されたファイルのリストを配列として取得します。
const selectedFile = files[0];
このサンプルではファイルが1個のみなので要素のインデックスに0を指定します。
selectedFile.name選択されたファイル名
selectedFile.typeファイルタイプ
selectedFile.sizeファイルサイズ
<input type="file" id="multipleFileInput" multiple >
inputタグにmultiple属性を設定することで複数のファイル選択が可能になります。※今回のサンプルでは未指定のためデフォルトの1つのファイル選択となります。


戻る


著作権情報
ホームページおよプリ等に掲載されている情報等については、いかなる保障もいたしません。
ホームページおよびアプリ等を通じて入手したいかなる情報も複製、販売、出版または使用させたり、
または公開したりすることはできません。
当方は、ホームペーよびアプリ利用したいかなる理由によっての障害等が発生しても、
その結果ホームページおよびアプリ等を利用された本人または他の第三者が被った損害について
一切の責任を負わないものとします。