ど素人から毛を生やす。<延>

input type="file"でアップロードされたファイル名を取得(IE9以下も)

Web > javascript 2017年7月13日(最終更新:7年前)

2017年7月13日に作成されたページです。
情報が古かったり、僕が今以上のど素人だった頃の記事だったりする可能性があります。

どもです。

jsにて、input type="file" でアップロードされたファイル名を参照する必要がありました。


var fileName = 対象のinput.files[0].name;

解決です。

と思いきや、

これではIE9以下では値が取得できないとのこと。

調べてみたところ、.fileにはFileAPIというものを使用しており、IEは10以上からしか対応していないと。

vistaのサポートも終わったしIE9以下とか捨てていーじゃん(゜-゜)
とか思う気持ちはありますが、仕方ないので対応しましょう。


var file = 対象のinput.value;
var regex = /\\|\\/;
var array = file.split(regex);
var fileName = array[array.length - 1];

まんま参考サイト様の受け売りなのですが、
input type="file"の.valueを取得すると、一般的なブラウザではファイルパスかファイル名になるそうです。

IEの場合はファイルパスなので、/で区切って配列化し、末尾のファイル名だけを取得します。
これでおk。

とはいえ、ブラウザごとにvalueが異なることを考えると、マイナーなブラウザで変な挙動する可能性も捨てられない。
IE以外は.files[0].nameにした方が可読性あるし、意図しない挙動の可能性も潰せるので良いかも。

ということで合体。


var userAgent = window.navigator.userAgent.toLowerCase();
if(userAgent.indexOf('msie')!=-1){
	var file = 対象のinput.value;
	var regex = /\\|\\/;
	var array = file.split(regex);
	var fileName = array[array.length - 1];
}else{
	var fileName = 対象のinput.files[0].name;
}

完遂(゜-゜)


参考サイト
覚え書き.com : JavaScript:Input「type=”file”」形式からの値取得についてのブラウザ別挙動

この記事は役に立ちましたか?
  • (`・ω・´) 役に立った (0)
  • _(:3」∠)_ 面白かった (1)
  • (・∀・) 参考になった (2)