手順
以下の二つのファイル
- test.html
- test.js
を作成する
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>JavaScript Sample</title>
<script type="text/javascript" src="test.js"></script>
</head>
<button>参照</button>
<input id="input1" style="display: none;" multiple="multiple" type="file" />
<div id="file_names"></div>
</body>
</html>test.js
var openFileDialog = function() {
var input1Element = document.getElementById('input1');
input1Element.click();
}
var fileSelected = function() {
var fileNamesDivElement = document.getElementById('file_names');
while (fileNamesDivElement.firstChild) {
fileNamesDivElement.removeChild(fileNamesDivElement.firstChild);
}
var input1Element = document.getElementById('input1');
var fileList = input1Element.files;
var ulElement= document.createElement('ul');
for (var i = 0; i < fileList.length; i++) {
var liElement = document.createElement('li');
liElement.textContent = fileList[i].name;
ulElement.appendChild(liElement);
}
fileNamesDivElement.appendChild(ulElement);
}説明
test.html
9~11行目
<button>参照</button>
<input id="input1" style="display: none;" multiple="multiple" type="file" />
<div id="file_names"></div>input要素でファイルダイアログを表示して選択されたファイル名を列挙する
input要素の見た目をデフォルトから変更したいのでinput要素を見えない状態にし、代わりにbutton要素のクリックからファイルを選択するようにする
multipleをつけることで複数のファイルを選択できるようになる
test.js
1~4行目
var openFileDialog = function() {
input1Element = document.getElementById('input1');
input1Element.click();
}ボタンのクリックでinputのクリックを呼び出す
8~10行目
while (fileNamesDivElement.firstChild) {
fileNamesDivElement.removeChild(fileNamesDivElement.firstChild);
}選択されたファイルを列挙する前に前回選択で表示されていたものを全て消去する
11~19行目
var fileList = input1.files;
var ulElement= document.createElement('ul');
for (var i = 0; i < fileList.length; i++) {
var liElement = document.createElement('li');
liElement.textContent = fileList[i].name;
ulElement.appendChild(liElement);
}
fileNamesDivElement.appendChild(ulElement);ファイル名のリストを作成してdomに要素を追加する
参考
MDN Web Docs : <input>: 入力欄 (フォーム入力) 要素
MDN Web Docs : <button>: ボタン要素
MDN Web Docs : File
MDN Web Docs : Node.removeChild