JavaScriptでファイル参照ボックス (ファイルアップロード) で参照選択されたファイルの値を取得するコードを紹介します。
ファイル参照ボックスのファイルの値を取得するには、ファイル参照ボックスの要素を取得し、要素のfilesプロパティを利用します。
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
function OnButtonClick() {
var fileRef = document.getElementById('File1');
var outFrame = document.getElementById('output');
for (i = 0; i < fileRef.files.length; i++) {
outFrame.innerHTML = fileRef.files[i].name +"<br/>";
}
}
</script></head>
<body>
<input id="File1" type="file" /><input id="Button1" type="button" value="開く" onclick="OnButtonClick();" />
<div id="output"></div>
</body>
</html>
ID=Button1のボタンがクリックされた際に、JavaScriptのOnButtonClick()関数を実行する動作です。ボタンクリック時の動作の詳細はこちらを参照してください。
document.getElementById() メソッドを呼び出し、ファイル参照ボックスと出力のためのid=outputの枠のオブジェクトを取得します。
var fileRef = document.getElementById('File1');
var outFrame = document.getElementById('output');
ファイル参照ボックスに設定されたファイルは、filesプロパティに格納されています。filesプロパティは配列になっています。これは、"multiple"属性が指定された場合、複数のファイルが設定されるためです。
配列の個数はlengthプロパティで取得できるため、forループで files.lengthまでループし、選択されているファイルを出力リアに表示します。ファイルの名前は files[(インデックス番号)].name で取得できます。最初の選択ファイル名は files[0].name となります。
for (i = 0; i < fileRef.files.length; i++) {
outFrame.innerHTML = fileRef.files[i].name +"<br/>";
}
プロジェクトを実行し、"GetValue.html"ファイルを表示します。
[参照]ボタンをクリックします。ファイル選択ダイアログボックスが表示されます。ファイルを選択して、[開く]ボタンをクリックします。
ファイルが選択されました。
[開く]ボタンをクリックすると、ファイル選択ボックスの下部に選択されたファイルのファイル名が表示されます。
別のファイルを選択した場合の例です。[開く]ボタンを押すと下部に表示されるファイル名も変わります。
JavaScriptでファイルをアップロードする方法についてはこちらの記事を参照してください。
