JavaScriptでファイル参照の仕方とファイル参照後のイベントの設定方法
むっちゃんＰRを含みます。
エクスプローラーを開きファイルを参照、ファイルを選択後の動きの指定について
スポンサーリンクはじめに
やりたいことは
１．ボタンを押すとエクスプローラー（ファイル）が開く
２．エクスプローラーでファイルを選択する
３．ファイル選択し、エクスプローラーの画面が閉じるとポップアップ画面を表示する
という処理の仕方について記述しています。
やりたいことの流れを画像で表すと以下の通りです。
エクスプローラを開く方法
エクスプローラを開いてファイルを選択します。エクスプローラを開く方法は簡単です。
<input type="file" id="myfile">
inputタグのタイプをfileとすると勝手に以下のように表示されます。
例
エクスプローラを開くのは簡単ですね！！！
次はエクスプローラでファイルを選択後に動きをつけましょう！
ファイル選択後の処理
ファイル選択後の処理をJavaScriptで書いていきます。
ファイルを選択するとポップアップ画面を表示するコードは以下の通りです。
<input type="file" id="myfile">
//ポップアップ画面
<div id="modal" class="modal">
<div class="modal_content">
<h1>Hello</h1>
</div>
</div>
<script>
//modal
var modal = document.getElementById('modal');
//Form
var form = document.getElementById('myfile');
//ファイルが読み込まれた時の処理
form.addEventListener('change', function(e) {
// ファイルを取得する
var result = e.target.files[0];
// ファイルを読み込む
var reader = new FileReader();
reader.readAsText(result);
//ここにファイル取得処理を書く
reader.addEventListener('load', function() {
//modalを表示
modal.style.display = 'block';
})
});
</script>
.modal{
display: none;
background: rgba(0,0,0,0.5);
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100%;
}
.modal_content{
background: #fff;
width: 500px;
margin: 25% auto;
}
htmlにはファイルを選択するボタンとポップアップ画面について書いてあります。
javascriptで動きをつけて、CSSはポップアップ画面についての簡単なデザインのみ書いてあります。
参考にさせていただいたサイト
以下のサイトを参考にさせていただきました。
フォーカスについてまとめてみた #CSS - Qiita
#フォーカスとは？フォーカスとは、キーボードイベントの行き先を決定することです。フォームでテキストボックスをクリックした時、要素が枠線でハイライト表示されます。…
【JavaScript入門】モーダルウィンドウ #JavaScript - Qiita
はじめにWebサイトを作成する際、・ボタン、画像を押したときにポップアップする小ウィンドウを設置したいと思うことあると思います。今回は、そんな機能についてご紹介し…
まとめ
この度はご覧いただきありがとうございました。
少しでもお役に立っていれば嬉しいです。
