1
我提出了這個Fiddle 但它不適用於bootstrap4 css。只有引導3,並不能找出原因。我認爲它必須這樣做,bootstrap 4沒有隱藏的類。我將如何更改js代碼以使其工作。JavaScript代碼不能與BootStrap 4一起使用,因爲它沒有隱藏類,
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>
我想這個代碼進行引導3 CSS和得到它的工作。 –
我認爲它與bootstrap4沒有隱藏類 –
Bootstrap 4需要Tether JS,因此在引導之前包含它js –