Railsでプログラミングを始めた私ですが、今回の記事はRailsじゃなくて別にhtmlやjavascriptの話だなと思い、まとめました。
事の発端はユーザープロフィール画像のアップロード機能を作っていたところです。以下のような問題が起こったので自作のファイル選択アップロードボタンを作ることになりました。
・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”ファイル選択アップロードボタンの説明
ここでやっているのは、もともとあるファイルアップロードボタンをCSSで見えなくして、自作のファイルアップロードボタンを作り、これをクリックしたら、もともとあるファイルアップロードボタンがクリックされた事にしてファイル選択ダイアログを出す‥ということをやります。
まず標準的なinput type=”file”の部分ですが、これをid=”file_button”で指定して、
<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」などというファイルパスが出てしまうので、それを消す事をやっています。
これで完成です。
