こんにちは。エンジニアの高田です。
少し秋らしくなってきましたね。
昨日は子供のリクエストでひたすらどんぐりを拾っていました。

今回は、ファイルをアップロードするための「input type=”file”」において
ファイルを選択するとブラウザによっては「C:fakepathファイル名」と表示される問題について紹介します。
「fakepath」って。。。使用している人は「えっ？このサイトあやしいところ？」って思っちゃいますよね。何とかしなければ。

「input type=”file”」のデザインのカスタマイズ

「input type=”file”」のデザインってブラウザに依存しますよね。
WEBサイトのデザインに合わせて、「input type=”file”」もデザインをカスタマイズする方法は、以下のような方法をとっています。
本来の「input type=”file”」を「display:none」で非表示にし、替わりに「readonly」の「input type=”text”」とボタンを準備します。

<!-- 代わりのテキストボックス -->
<input id="text" type="text" placeholder="ファイルを選択してください" />
<label for="file">
　　<!-- 非表示にするtype="file" -->
　　<input id="file" type="file" style="display: none;" />
　　<!-- 代わりのボタン -->
　　<p style="cursor: pointer; padding: 2px 10px; background-color: #dedede; border: solid 1px #b7b7b7; display: inline-block;" >ファイル選択</p>
</label>
<script type="text/javascript">
　　$(function(){
　　　　// 選択ファイル設定（ファイル名をテキストボックスへ表示）
　　　　$('input[type=file]').on('change',function(){
　　　　　　// ↓(1)こっちだと「fakepath」が表示される
　　　　　　$('#input_file_name').val($(this).val());
　　　　　　// ↓(2)こっちならファイル名だけを表示する
　　　　　　$('#input_file_name').val($(this).prop('files')[0].name);
　　　　});
　　});
</script>

IE、Chromeだと「fakepath」が表示される

上記(1)のように「type=”file”」のvalueプロパティを取得すると、「fakepath」が表示されました。
「type=”file”」のvalueプロパティへのアクセスには、セキュリティ上の理由によりフルパスは取得できないように制約が設けられているそうです。それもブラウザによって違いがあるそうです。

「Firefox」はファイル名のみが取得できます。
「IE」や「Chrome」は「C:fakepathファイル名」が取得できます。

なので、上記(2)のように「Firefox」と同様ファイル名のみを取得するようにしてみました。

ではまた。