戻る

ファイル選択ダイアログから選択したファイルを読み込む
ファイル選択ダイアログから選択したファイルを読み込む

FileReaderAPIを使ってユーザーが選択したファイルの内容を取得します。
[条件]
<input type="file">を準備
changeイベントを監視

テキストFileReader.readAsText(fileパス, エンコード)
画像FileReader.readAsDataURL(fileパス)


[サンプル]
copy
const fileInput = document.getElementById('file-input');
const fileContentElement = document.getElementById('file-content');
const image = document.getElementById('image');
image.style.display = "none";

let fileType = 0;//[0]not image [1]image

fileInput.addEventListener('change', (event) => 
{
	const file = event.target.files[0];
	if (!file) 
	{
		return;
	}

	const reader = new FileReader();

	reader.onload = (e) => {
		const content = e.target.result;
		if(fileType == 0)
		{
			fileContentElement.textContent = content;
			fileContentElement.style.display = "block";
			image.style.display = "none";
		}
		else
		{
			fileContentElement.textContent = "";
			image.src = content;
			fileContentElement.style.display = "none";
			image.style.display = "block";
		}
	};

	reader.onerror = (e) => {
		console.error('it occur error to load file.', e);
		fileContentElement.textContent = 'it cannot read file.';
	};
	if(file.type.startsWith("image/"))
	{
		fileType = 1;
		reader.readAsDataURL(file, 'UTF-8');
	}
	else
	{
		fileType = 0;
		reader.readAsText(file);
	}
});


const file = event.target.files[0];
event.target.filesプロパティから配列を取得します。
このファイル選択ダイアログのサンプルでは一つしか選べないようにしています。
そのため選択したファイルは配列要素0の値となります。

const reader = new FileReader();
ファイルの内容を非同期で読み込むためのオブジェクトです。

reader.readAsText(file, 'UTF-8');
指定されたファイルを読み込みます。
第1引数ファイル名
第2引数文字エンコーディングを指定
読み込み形式:テキスト
エンコード;UTF-8

reader.onload = (e) => {
ファイルの読み込みが正常に完了したときに実行されるイベント

const content = e.target.result;
読み込んだファイルの内容が格納されます。

reader.onerror = (e) => {
ファイルの読み込み中にエラーが発生したときに実行されるイベント

fileContentElement.textContent = content;
テキストとしてreadAsTextメソッドで読み込んだ値を設定しています。

image.src = content;
画像としてreadAsDataURLメソッドで読み込んだ値を設定しています。

if(file.type.startsWith("image/"))
MIMEタイプを使用して画像かその他(テキストなど)を判定しています。

image/
(例)
image/png
image/jpeg
image/gif

text/
(例)
text/plain
text/html
text/css



戻る



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