JavaScript 代码不适用于 BootStrap 4，因为它没有隐藏类，

Question

我做了这个Fiddle但它不适用于 bootstrap4 css。仅使用 Bootstrap 3，不明白为什么。我认为 bootstrap 4 没有隐藏类。我如何更改 js 代码以使其工作。

JS:

$(document).ready(function() {
      function readURL(input) {
          if (input.files && input.files[0]) {
              var reader = new FileReader();

              var
                  $container = $(input).closest('.upload'), // Find relative .upload container
                  $preview = $container.find('.img-preview'), // Find relative .img-preview in the container
                  $uploadedImage = $container.find('.uploaded-image'), // Find relative .uploaded-image in the container
                  $addImage = $container.find('.add-image'); // Find relative .add-image in the container

              reader.onload = function(e) {

                  // Use relative elements in your code
                  $preview.attr('src', e.target.result);
                  if ($uploadedImage.is(':hidden')) {
                      $uploadedImage.toggleClass("hidden")
                      $addImage.toggleClass("hidden")
                  }
              }

              reader.readAsDataURL(input.files[0]);
          }
      }

      $(".imgInp").change(function() {
          readURL(this);
      });

  });



  $('#delete2').on('click', function() {
      $('#image2').val("")

      $('.deleteme2a').removeClass("hidden")
      $('.deleteme2b').addClass("hidden")
      $("#hidden-image2").val("change");

  });


  $('#delete3').on('click', function() {
      $('#image3').val("")

      $('.deleteme3a').removeClass("hidden")
      $('.deleteme3b').addClass("hidden")
      $("#hidden-image3").val("change");

  });


  $('#delete4').on('click', function() {
      $('#image4').val("")
      $('.deleteme4a').removeClass("hidden")
      $('.deleteme4b').addClass("hidden")
      $("#hidden-image4").val("change");

  });

  $('#delete5').on('click', function() {
      $('#image5').val("")

      $('.deleteme5a').removeClass("hidden")
      $('.deleteme5b').addClass("hidden")
      $("#hidden-image5").val("change");

  });


  $(function() {
      $("#image1:file").change(function() {
          $("#hidden-image1").val("change");
      });
  });

  $(function() {
      $("#image2:file").change(function() {
          $("#hidden-image2").val("change");
      });
  });

  $(function() {
      $("#image3:file").change(function() {
          $("#hidden-image3").val("change");
      });
  });

  $(function() {
      $("#image4:file").change(function() {
          $("#hidden-image4").val("change");
      });
  });

  $(function() {
      $("#image5:file").change(function() {
          $("#hidden-image5").val("change");
      });
  });

HTML:

<div class="col-md-4 col-lg-2 ">
              <p style="text-align:center;"> <b> Image 5</b>
              </p>
              <div class="upload center-block">
                <span style="background: #black;float:right; position:absolute;cursor:pointer; left: 145px; z-index: 10; padding: 6px 7px;" class="badge " id="delete5"> <i class="fa fa-remove"></i>  </span>
                <input class="input-file imgInp" id="image5" name="image5" type="file">
                <label for="files">
                  <span class="add-image deleteme5a   ">
                    Add Image
                  <br>Image</span>
                  <span class="uploaded-image deleteme5b  hidden  ">
                    <img class="img-preview" src="" width="160" height="160" alt="your image" style="margin:0px">
                  </span>
                  <output id="list"></output>
                </label>
              </div>
            </div>

Answer 1

因为Bootstrap 4需要 Tether JS

CDN 网址:

https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js

并且不要两次包含 jQuery。

$(window).load(function() {
  $(document).ready(function() {
    function readURL(input) {
      if (input.files && input.files[0]) {
        var reader = new FileReader();
        var
          $container = $(input).closest('.upload'), // Find relative .upload container
          $preview = $container.find('.img-preview'), // Find relative .img-preview in the container
          $uploadedImage = $container.find('.uploaded-image'), // Find relative .uploaded-image in the container
          $addImage = $container.find('.add-image'); // Find relative .add-image in the container

        reader.onload = function(e) {
          // Use relative elements in your code
          $preview.attr('src', e.target.result);
          if ($uploadedImage.is(':hidden')) {
            $uploadedImage.toggleClass("hidden")
            $addImage.toggleClass("hidden")
          }
        }
        reader.readAsDataURL(input.files[0]);
      }
    }
    $(".imgInp").change(function() {
      readURL(this);
    });
  });

  $('#delete2').on('click', function() {
    $('#image2').val("")
    $('.deleteme2a').removeClass("hidden")
    $('.deleteme2b').addClass("hidden")
    $("#hidden-image2").val("change");
  });

  $('#delete3').on('click', function() {
    $('#image3').val("")
    $('.deleteme3a').removeClass("hidden")
    $('.deleteme3b').addClass("hidden")
    $("#hidden-image3").val("change");
  });


  $('#delete4').on('click', function() {
    $('#image4').val("")
    $('.deleteme4a').removeClass("hidden")
    $('.deleteme4b').addClass("hidden")
    $("#hidden-image4").val("change");
  });

  $('#delete5').on('click', function() {
    $('#image5').val("")
    $('.deleteme5a').removeClass("hidden")
    $('.deleteme5b').addClass("hidden")
    $("#hidden-image5").val("change");
  });

  $(function() {
    $("#image1:file").change(function() {
      $("#hidden-image1").val("change");
    });
  });

  $(function() {
    $("#image2:file").change(function() {
      $("#hidden-image2").val("change");
    });
  });

  $(function() {
    $("#image3:file").change(function() {
      $("#hidden-image3").val("change");
    });
  });
  $(function() {
    $("#image4:file").change(function() {
      $("#hidden-image4").val("change");
    });
  });

  $(function() {
    $("#image5:file").change(function() {
      $("#hidden-image5").val("change");
    });
  });
});

.upload {
  position: relative;
  display: block;
  width: 160px;
}

.upload label {
  color: #5F626A;
  cursor: pointer;
  width: 160px;
  height: 160px;
  position: relative;
  display: block;
  border: 3px dashed #5F626A;
  border-radius: 10px;
  overflow: hidden;
  transition: background ease .5s;
  pointer-events: none;
  /*This for FF*/
}

.input-file {
  opacity: 0;
  /*This*/
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.add-image {
  display: block;
  width: 100%;
  margin: 65px auto;
  text-align: center;
  font-size: 11px;
  font-family: sans-serif;
}

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>



<div class="col-md-4 col-lg-2 ">
    <p style="text-align:center;"> <b> Image 5</b>
    </p>
    <div class="upload center-block">
        <span style="background: #black;float:right; position:absolute;cursor:pointer; left: 145px; z-index: 10; padding: 6px 7px;" class="badge " id="delete5"> <i class="fa fa-remove"></i>  </span>
        <input class="input-file imgInp" id="image5" name="image5" type="file">
        <label for="files">
            <span class="add-image deleteme5a   ">
                Add Image
                <br>Image
            </span>
            <span class="uploaded-image deleteme5b  hidden  ">
                <img class="img-preview" src="" width="160" height="160" alt="your image" style="margin:0px">
            </span>
            <output id="list"></output>
        </label>
    </div>
</div>