JavaScriptコードは、隠しクラスがないため、BootStrap 4で動作しません。

Question

私はこれをFiddle としましたが、bootstrap4 cssで動作しません。ブートストラップ3でしかできない理由が分かります。私はそれが隠されたクラスを持っていないブートストラップ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：

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

二回のjQueryを含まない：

<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は、テザーJS

CDNのURLを必要とするため。

$(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>