・SIMフリースマホで見ると英語表示になる
・ファイル選択後にファイル名が出ない
・ファイル名にfakepathと出てしまう
ちなみにブラウザによってファイル選択アップロードボタンは表示が変わる事が多く、このように自作する人が殆どなんだそうです。
ほうぼうの参考サイトや海外サイトを見ても、一部のみ書いてあったりして全容を記述してる記事が無くてここに全体を書きます。
・input type=”file”でファイル名を表示する方法
・input type=”file”でC:\fakepath\が入る問題の解決策
もカバーしています。
目次
input type=”file”ファイル選択アップロードボタンの実装全容
html部分とcss部分とjavascript部分は以下のようになります。<form action=""> ファイルを選択 <input id="filename" readonly type="text" value="" ><button type="button" id="select_file_button">選択</button> <input id="file_button" type="file" /> <input type="submit" name="commit" value="プロフィール編集を完了する" /></div> </form>
#file_button {display: none;}
<script type="text/javascript">
$(document).on('click', '#select_file_button', function() {
$("#file_button").click();
})
</script>
<script type="text/javascript">
$(document).on('change', '#file_button', function() {
$('#filename').val($(this).val().replace(/^.*\\/, ""));
})
</script>
input type=”file”ファイル選択アップロードボタンの説明
<input id="file_button" type="file" />以下のようにcssで見えなくします。
#file_button {display: none;}
それからボタンのところから説明します。
<button type="button" id="select_file_button">選択</button>ボタンにはid=”select_file_button”を指定しまして、javascriptでこれがクリックされたらどう動く、という記述をしています。
$(document).on('click', '#select_file_button', function() {
$("#file_button").click();
})
select_file_buttonがクリックされたら、file_buttonをクリックする挙動です。これで先程cssで見えなくしたinput type=”file”のボタンが押されたことになり、ファイル選択ダイアログが出現します。
ファイルを選択したら、ファイル名を表示させたいので
<input id="filename" readonly type="text" value="" >このテキストボックスを配置し、初期値valueは空で、readonly（ユーザー編集不可）にします。 で、2つ目のjavascriptです。
$(document).on('change', '#file_button', function() {
$('#filename').val($(this).val().replace(/^.*\\/, ""));
})
</script>
#file_buttonが変更されたら、#filenameの値を表示せよ、とします。これによって選択したファイル名がテキストボックス内に表示されます。
replaceのところは何をしてるかというと、chromeブラウザだと「fakepath」などというファイルパスが出てしまうので、それを消す事をやっています。
これで完成です。
プログラミング学習を体系的に進めたい人へ
独学で基礎を確認したあとに、質問できる環境や転職・副業向けの学習サポートも比べたい人は、プログラミングスクールの比較記事も参考にしてください。学習目的、料金、受講期間、サポート範囲を分けて見ると、自分に合う学び方を選びやすくなります。
