Загрузка файла не работает во вкладке Boostrap - PullRequest
Новая
       30

Загрузка файла не работает во вкладке Boostrap

0 голосов
/ 01 июня 2018

Я занимаюсь разработкой веб-страницы, на которой пользователю необходимо загрузить файл.Я использую общую технику, расположенную поверх элемента \ input type = "file" \, которая позволяет мне лучше его стилизовать.

Это работает нормально, пока я не помещу его на вкладку Bootstrap 4, где он появляетсячто элемент перестает получать событие Click.

Чтобы продемонстрировать это, у меня есть HTML-страница с использованием Jquery и Bootstrap.У меня есть подобные элементы, сидящие внутри и снаружи вкладки.Когда я нажимаю кнопку «Обзор» на элементах вне вкладки, она работает, как и ожидалось.Однако, когда я нажимаю кнопку «Обзор» на вкладке, ничего не происходит.Вам нужно выбрать «tab 2», а затем «tab 1», чтобы отобразить содержимое первой вкладки.

На вкладке Bootstrap должно быть что-то, что блокирует это.

Может кто-нибудь указатьменя в правильном направлении, как мне нужно использовать вкладки? 

<!DOCTYPE html>
<title>File Upload</title>

<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
    body {
        padding-top: 1em;
    }
</style> 

<div class="container">
    <div class="row">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link active" id="tab1" data-toggle="tab" role="tab" aria-controls="tab1" aria-selected="true" href="#tab1Content">Tab 1</a>
            </li>
            <li>
                <a class="nav-link" id="tab2" data-toggle="tab" role="tab" aria-controls="tab2" aria-selected="false" href="#tab2Content">Tab 2</a>
            </li>
        </ul>
        <div class="tab-content" id="tabContent">
            <div class="tab-pane fade show " id="tab1Content" data-toggle="tab" role="tabpanel" aria-labelledby="tab1">
                <div class="row pb-5">
                    <div class="col-md-12">
                        <div class="input-group">
                            <p>Inside of tab</p>
                            <input type="file" id="fileUploader" name="fileUploader" style="visibility:hidden;" />
                            <input class="form-control input-xlarge" type="text" id="fileName" value="Choose file">

                            <div class="input-group-append">
                                <button id="browseButton" name="browseButton" class="btn btn-success input-group-text">Browse</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="tab2Content" role="tabpanel" aria-labelledby="tab2">
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row pb-5">
        <div class="col-md-12">
            <div class="input-group">
                <p>Outside of tab</p>
                <input type="file" id="fileUploader2" name="fileUploader2" style="visibility:hidden;" />
                <input class="form-control input-xlarge" type="text" id="fileName2" value="Choose file">

                <div class="input-group-append">
                    <button id="browseButton2" name="browseButton2" class="btn btn-success input-group-text">Browse</button>
                </div>
            </div>
        </div>
    </div>
</div>


    
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script>
    $(document).ready(function () {        

        $('#browseButton').on('click', function () {
            $('#fileUploader').click();
        });

        $('#fileUploader').change(function () {
            $('#fileName').val($(this).val());
        });

        $('#browseButton2').on('click', function () {
            $('#fileUploader2').click();
        });

        $('#fileUploader2').change(function () {
            $('#fileName2').val($(this).val());
        });

    });
</script>

1 Ответ

0 голосов
/ 01 июня 2018

Пожалуйста, проверьте ниже фрагмент кода.Возможно, ваши HTML-теги не были закрыты должным образом. 

<!DOCTYPE html>
<title>File Upload</title>

<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
    body {
        padding-top: 1em;
    }
</style> 

<div class="container">
    <div class="row">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
          </li>
        </ul>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.
                <p>Inside of tab</p>
                <input type="file" id="fileUploader" name="fileUploader" style="visibility:hidden;" />
                <input class="form-control input-xlarge" type="text" id="fileName" name="fileName" value="Choose file">

                <div class="input-group-append">
                    <button id="browseButton" name="browseButton" class="btn btn-success input-group-text">Browse</button>
                </div>
            </div>
          <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna consequat voluptate minim amet aliquip ipsum aute laboris nisi. Labore labore veniam irure irure ipsum pariatur mollit magna in cupidatat dolore magna irure esse tempor ad mollit. Dolore commodo nulla minim amet ipsum officia consectetur amet ullamco voluptate nisi commodo ea sit eu.
          </div>
          <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
            Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat. Deserunt officia id Lorem nostrud aute id commodo elit eiusmod enim irure amet eiusmod qui reprehenderit nostrud tempor. Fugiat ipsum excepteur in aliqua non et quis aliquip ad irure in labore cillum elit enim. Consequat aliquip incididunt ipsum et minim laborum laborum laborum et cillum labore. Deserunt adipisicing cillum id nulla minim nostrud labore eiusmod et amet. Laboris consequat consequat commodo non ut non aliquip reprehenderit nulla anim occaecat. Sunt sit ullamco reprehenderit irure ea ullamco Lorem aute nostrud magna.
          </div>
        </div>
    </div>
</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div class="container">
    <div class="row pb-5">
        <div class="col-md-12">
            <div class="input-group">
                <p>Outside of tab</p>
                <input type="file" id="fileUploader2" name="fileUploader2" style="visibility:hidden;" />
                <input class="form-control input-xlarge" type="text" id="fileName2" value="Choose file">

                <div class="input-group-append">
                    <button id="browseButton2" name="browseButton2" class="btn btn-success input-group-text">Browse</button>
                </div>
            </div>
        </div>
    </div>
</div>



<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script>
    $(document).ready(function () {        

        $('#browseButton').on('click', function () {
            $('#fileUploader').click();
        });

        $('#fileUploader').change(function () {
            $('#fileName').val($(this).val());
        });

        $('#browseButton2').on('click', function () {
            $('#fileUploader2').click();
        });

        $('#fileUploader2').change(function () {
            $('#fileName2').val($(this).val());
        });

    });
</script>
...