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

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

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

どもです。

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”」形式からの値取得についてのブラウザ別挙動

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