ファイル参照ボックス (ファイルアップロード) の選択ファイル名を取得する
このページのタグ:[JavaScript] [ファイルアップロード]
JavaScriptでファイル参照ボックス (ファイルアップロード) で参照選択されたファイルの値を取得するコードを紹介します。

プログラム

コード

GetValue.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()関数を実行する動作です。ボタンクリック時の動作の詳細はこちらを参照してください。

OnButtonClick() 関数


var fileRef = document.getElementById('File1');
var outFrame = document.getElementById('output');
document.getElementById() メソッドを呼び出し、ファイル参照ボックスと出力のためのid=outputの枠のオブジェクトを取得します。


for (i = 0; i < fileRef.files.length; i++) {
  outFrame.innerHTML = fileRef.files[i].name +"<br/>";
}
ファイル参照ボックスに設定されたファイルは、filesプロパティに格納されています。filesプロパティは配列になっています。これは、"multiple"属性が指定された場合、複数のファイルが設定されるためです。
配列の個数はlengthプロパティで取得できるため、forループで files.lengthまでループし、選択されているファイルを出力リアに表示します。ファイルの名前は files[(インデックス番号)].name で取得できます。最初の選択ファイル名は files[0].name となります。
補足
ファイル参照ボックスで、"multiple"属性が指定できるのはHTML5からになります。

実行結果

プロジェクトを実行し、"GetValue.html"ファイルを表示します。


[参照]ボタンをクリックします。ファイル選択ダイアログボックスが表示されます。ファイルを選択して、[開く]ボタンをクリックします。


ファイルが選択されました。


[開く]ボタンをクリックすると、ファイル選択ボックスの下部に選択されたファイルのファイル名が表示されます。


別のファイルを選択した場合の例です。[開く]ボタンを押すと下部に表示されるファイル名も変わります。


補足

JavaScriptでファイルをアップロードする方法についてはこちらの記事を参照してください。

プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)