Q&A
前提・実現したいこと
Bootstra4にてWeb画面を作成しており、ファイル選択のレイアウトを編集したいです。
↓こちらのデフォルト表示から
↓こちらの表示へとレイアウトを変え、ファイル選択後はテキストボックスにファイル名が表示されるようにしたいです。
発生している問題・エラーメッセージ
レイアウトを変えたもののJavaScriptの書き方が分からず、取得したファイルの値をテキストボックスに表示することができません。選択後も、テキストは「選択されていません」のままになってしまいます。
（テキストボックスにポインタを合わせると、選択したファイル名がポップアップで表示されるので、Formとしては情報の取得は出来ているとは思います…。）
Htmlに直書きしようと思うのですが、JavaScriptの実装方法を教えていただきたいです。
該当のソースコード
html
1<!DOCTYPE HTML> 2<html lang="ja" xmlns:th="http://www.thymeleaf.org"> 3<head> 4<title></title> 5 <link rel="stylesheet" href="/css/bootstrap.css"> 6</head> 7<body> 8 ・ 9 ・ 10 ・ 11 <form action=・・・・> 12 <div class="custom-file"> 13 <input type="file" class="custom-file-input" id="uploadfile" name="uploadfile"> 14 <label class="custom-file-label" for="uploadfile" data-browse="参照">選択されていません</label> 15 </div> 16 </div> 17 ・ 18 ・ 19 ・ 20 </form> 21<script type="text/javascript"> 22$('.custom-file-input').on('change',function(){ 23 $(this).next('.custom-file-label').html($(this)[0].files[0].name); 24 }); 25</script> 26</body> 27</html>
CSS
1.custom-file{ 2 overflow:hidden; 3} 4 5.custom-file-label{ 6 white-space:nowrap; 7}
HTMLの<script>部分を、どのように実装すればよいでしょうか？
また、記載する位置はここで合っていますでしょうか？
JavaScriptに触ったことが無いため、HTML内で実装したいと思っています。もし外部にJSファイルを作成する必要がある場合は、連携方法を教えていただけると幸いです。
回答1件
0
ベストアンサー
ファイルを未選択状態に変更した場合にも対応するため、次のように書いたほうがいいでしょう。
jQuery
1$(document).on('change', '.custom-file-input', function(event) { 2 const files = this.files; 3 $('.custom-file-label', $(this).parent()).text(files.length ? files[0].name : '選択されていません'); 4});
見てのとおり、'選択されていません'とハードコーディングされています。これを避けるにはあらかじめラベルから取得しておかないといけません。
bs-custom-file-input を使うならこの問題も解消します。Bootstrap のドキュメントにおけるサンプルではこれが使われています。
jQuery
1$(function() { 2 bsCustomFileInput.init(); 3});
投稿2020/03/16 02:01
編集2020/03/16 02:57
総合スコア13749
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/20 05:39