Image Preview Scripts & Add Multiple Boxes Scripts

How to load Single Image Preview

<input type="file" name="" id="" onchange="readURL(this, previewImage)">

<img id="previewImage" value="">

 <script type="text/javascript">

        function readURL(This, img_id) {

        var reader = new FileReader();

        reader.onload = function(e) {

        $('img#'+img_id).attr('src', e.target.result);

        $('img#'+img_id).addClass('on__changeImg');

        $('img#'+img_id).css('border','1px solid #000');

        }

        reader.readAsDataURL(This.files[0]);

        }

  </script>

How to load Single Image Preview

<script>

function readURL(input) {

    if (input.files && input.files[0]) {

        var reader = new FileReader();

        reader.onload = function (e) {

            $('#previewImage4').attr('src', e.target.result);

        }

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

    }

}

$("#file-1").change(function () {

    readURL(this);

});

</script>

How to load Multiple Images Preview

<script type="text/javascript">

function previewImages() {

  var $preview = $('#previewImage').empty();

  if (this.files) $.each(this.files, readAndPreview);

  function readAndPreview(i, file) {

    

    if (!/\.(jpe?g|png|gif)$/i.test(file.name)){

      return alert(file.name +" is not an image");

    } // else...

    

    var reader = new FileReader();

    $(reader).on("load", function() {

      $preview.append($("<img/>", {src:this.result, height:100}));

    });

    reader.readAsDataURL(file);

   

  }

}

$('#file-1').on("change", previewImages);

</script>

<input type="file" id="file-1">

<div id="previewImage">

Script to Add Multiple Boxes

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

        <script>

         $(function(){

             var  x ='<?php echo $x; ?>';

             $("#plus_degree").click(function(){

                   x++;

                var data='';

                data+="<div class='form-group d-flex' id='parent"+x+"' style='border:1px solid black;margin:10px'>";

                data+="<div class='form-group col-sm-4'>"

                   data+='{{ Form::label("degreetype", __("messages.user.degree_type").":") }}<label class="required">*</label>';

                   data+="<select class='form-control' name='degree[]'><option>Choose your Degree</option>";

                   data+="<?php foreach ($degrees as $deg) { ?>";

                   data+="<option value='{{$deg->id}}'><?php echo $deg->degree; ?></option>";

                   data+="<?php } ?>";

                   data+="</select></div>";

                   data+="<div class='col-md-4'><div class='form-group'>";

                   data+='{{ Form::label("degree", __("messages.user.degreetype").":") }}';

                   data+='{{ Form::text("degree_type[]", null, ["class" => "form-control"]) }}';

                   data+="</div></div>";

                   data+=" <div class='form-group col-md-4'><div class='row no-gutters'><div class='col-8'>";

                   data+='{{ Form::label("degree_photo", __("messages.user.degreephoto").":") }}';

                   data+="<label class='image__file-upload' tabindex='11'>";

                   data+='{{ __("messages.nurse.choose") }}';

                   data+="<input type='file' name='degree_photo[]' id='degree_photo' class='d-none'>";

                   data+="</label></div>";

                   data+="<div class='col-4'><div class='col-sm-4 preview-image-video-container pl-0 mt-1'>";

                   data+="<img id='previewImage3' class='img-thumbnail thumbnail-preview' src='{{asset('assets/img/avatar.png')}}'/>";

                   data+="</div></div></div>";

                   data+="<div><button class='bg-danger' type='button' style='float:right' onClick='deleteDegree("+x+")'>Delete</div></div>";

                   $("#menu1").append(data);

             });

         });

            function deleteDegree(x){

                $("#parent"+x).remove();

            }

</script>