[解決済み] bootstrap 4のファイル入力でファイル名が表示されない [duplicate］

2022-11-10 15:09:50

質問

Bootstrap 4のcustom-file-inputクラスで問題が発生しました。アップロードするファイルを選択した後、ファイル名が表示されません。

私はこのコードを使っています。

<div class="input-group mb-3">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile02">
    <label class="custom-file-label" for="inputGroupFile02">Choose file</label>
  </div>
  <div class="input-group-append">
    <button class="btn btn-primary">Upload</button>
  </div>
</div>

あまり複雑にならないように修正する方法を教えてください。

どのように解決するのですか？

ドキュメントに書かれているように、選択したファイルの名前を表示するために、javascriptを使用する必要があります。 https://getbootstrap.com/docs/4.5/components/forms/#file-browser

ここで、解決策を見つけることができます。 Bootstrap 4のファイル入力

これが例のコードです。

<html lang="en">
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    </head>
    <body>
        <div class="input-group mb-3">
            <div class="custom-file">
                <input type="file" class="custom-file-input" id="inputGroupFile02"/>
                <label class="custom-file-label" for="inputGroupFile02">Choose file</label>
            </div>
            <div class="input-group-append">
                <button class="btn btn-primary">Upload</button>
            </div>
        </div>
        <script>
            $('#inputGroupFile02').on('change',function(){
                //get the file name
                var fileName = $(this).val();
                //replace the "Choose a file" label
                $(this).next('.custom-file-label').html(fileName);
            })
        </script>
    </body>
</html>

[解決済み] bootstrap 4のファイル入力でファイル名が表示されない [duplicate］

質問

どのように解決するのですか？

関連

[解決済み] 入力テキストボックスの値を取得する

[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか？

[解決済み] input type="file "ボタンのスタイリング

[解決済み] セレクトした要素の外側のHTMLを取得する

[解決済み] HTML Input="file" Accept Attribute File Type (CSV)

[解決済み] jQuery UI DatePicker - 日付フォーマットの変更

[解決済み] jQueryを使用してテキストボックスの値を取得するには？

[解決済み] セレクトボックスの選択項目を設定する

[解決済み] ボタンやリンクを無効化・有効化する最も簡単な方法とは（jQuery + Bootstrap）

[解決済み】<input type="file">でファイル形式を制限する？

最新

nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)

htmlページでギリシャ文字を使うには

ピュアhtml+cssでの要素読み込み効果

純粋なhtml + cssで五輪を実現するサンプルコード

ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード

タイピング効果を実現するピュアhtml+css

htmlの選択ボックスのプレースホルダー作成に関する質問

html css3 伸縮しない画像表示効果

トップナビゲーションバーメニュー作成用HTML+CSS

html+css 実装サイバーパンク風ボタン

おすすめ

Uncaught TypeError: 未定義のプロパティ 'length' を読み取れませんでした。

echarts-all.js:1 Uncaught TypeError: nullのプロパティ'getAttribute'を読み取ることができません。

[解決済み] ユーザーがEnterキーを押してフォームを送信できないようにする

[解決済み] jQueryのSELECT要素で特定のオプションを選択するにはどうすればよいですか？

[解決済み] jQuery hasAttrで要素に属性があるかどうかをチェックする【重複あり

[解決済み] jQueryで複数のCSS属性を定義するには？

[解決済み] セレクトボックスの選択項目を設定する

[解決済み] jQueryで多段式フォームをリセットする

[解決済み】jQueryで入力不可属性をトグルする。

[解決済み] jQueryを使用して文字列から最後の文字を削除する方法は？