HTMLとjavascriptでアップロードされた複数のファイル名を取得する

muramatsu 16views 更新:2016年11月30日

html側

//multipleと name tmpfile[] という配列にする事によって複数選択可能
//onchange はフォームに変化が起きた時に起こすイベントハンドラ(今回はcheckfile関数を指定)
<input type="file" id="file_input" name="tmpfile[]" multiple="multiple" onchange=checkfile()>
//ファイル名を表示する disabled でtype="text"でありながらブラウザから文字列を直接かけないようにする。
<input id="selectfile" type="text" name="selectFile" value="" size="100" disabled>

javascript側

function checkfile() {
//getElementByIdで上記のhtmlのID id="file_input" から選択されたファイルの情報を読み込む。
  var file_name = document.getElementById("file_input").files;
//変数定義
  var list = "";
//for文で入っているファイルの文だけファイル名を取得する
  for (var i=0; i<file_name.length; i++){
    list += file_name[i].name + " ,"
  }
//list の文字列の末尾の一文字を削除する
  var result = list.substr(0, list.length-1);
//document.getElementByIdで idを selectfile に指定してdocument.getElementById("selectfile").valueで中身を変数resultで指定する
  document.getElementById("selectfile").value = result;
}

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません