Drag and drop or upload input file

<!DOCTYPE html>
<html>
<head>
    <title>Drag and drop or upload input file | Par NGLESSON</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keyword" content="Drag and drop or upload input file">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">    	
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="style.css" rel="stylesheet" type="text/css">	
</head>
<body>
<div class="container">
    <div class="row">
        <div class="file-upload col-lg-6">
            <button class="file-upload-btn" type="button" onclick="$('.file-upload-input1').trigger('click')">Ajouter une image</button>
            <div class="image-upload-wrap1">
                <input class="file-upload-input1" type='file' onchange="getImage(this, '1');" accept="image/*" />
            <div class="drag-text">
                <h3>Drag and drop or select image</h3>
            </div>
            </div>
            <div class="file-upload-content1">
            <img class="file-upload-image1" src="#" alt="your image" />
            <div class="image-title-wrap1">
                <button type="button" onclick="delUpload('1')" class="remove-image1">
                        <i class="fa fa-trash"></i> <span class="image-title1">Uploaded Image</span>
                </button>
            </div>
            </div>
        </div>
        <div class="file-upload col-lg-6">
            <button class="file-upload-btn" type="button" onclick="$('.file-upload-input2').trigger('click')">Ajouter une image</button>
            <div class="image-upload-wrap2">
            <input class="file-upload-input2" type='file' onchange="getImage(this, '2');" accept="image/*" />
            <div class="drag-text">
                <h3>Drag and drop or select image</h3>
            </div>
            </div>
            <div class="file-upload-content2">
            <img class="file-upload-image2" src="#" alt="your image" />
            <div class="image-title-wrap2">
                <button type="button" onclick="delUpload('2')" class="remove-image2">
                    <i class="fa fa-trash"></i> <span class="image-title2">Uploaded Image</span>
                </button>
            </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
body {
    font-family: sans-serif;
    background-color: #eeeeee;
  }
  
  .file-upload {
    background-color: #ffffff;
    width: 600px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .file-upload-btn {
    width: 100%;
    margin: 0;
    color: #fff;
    background: #1FB264;
    border: none;
    padding: 10px;
    border-radius: 4px;
    border-bottom: 4px solid #15824B;
    transition: all .2s ease;
    outline: none;
    text-transform: uppercase;
    font-weight: 700;
  }
  
  .file-upload-btn:hover {
    background: #1AA059;
    color: #ffffff;
    transition: all .2s ease;
    cursor: pointer;
  }
  
  .file-upload-btn:active {
    border: 0;
    transition: all .2s ease;
  }
  
  .file-upload-content1,
  .file-upload-content2 {
    display: none;
    text-align: center;
  }
  
  .file-upload-input1,
  .file-upload-input2{
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    outline: none;
    opacity: 0;
    cursor: pointer;
  }
  
  .image-upload-wrap1,
  .image-upload-wrap2{
    margin-top: 20px;
    border: 4px dashed #1FB264;
    position: relative;
  }
  
  .image-dropping,
  .image-upload-wrap1:hover ,
  .image-upload-wrap2:hover {
    background-color: #1FB264;
    border: 4px dashed #ffffff;
  }
  
  .image-title-wrap1,
  .image-title-wrap2 {
    padding: 0 15px 15px 15px;
    color: #222;
  }
  
  .drag-text {
    text-align: center;
  }
  
  .drag-text h3 {
    font-weight: 100;
    text-transform: uppercase;
    color: #15824B;
    padding: 60px 0;
  }
  
  .file-upload-image1,
  .file-upload-image2 {
    margin: auto;
    padding: 10px;
    width: 100%;
    height: auto;
  }
  
  .remove-image1,
  .remove-image2 {
    width: 100%;
    margin: 0;
    color: #fff;
    background: #fb2c15;
    border: none;
    padding: 10px;
    border-radius: 4px;
    border-bottom: 4px solid #fb2c15;
    transition: all .2s ease;
    outline: none;
    text-transform: uppercase;
    font-weight: 700;
  }
  
  .remove-image1:hover,
  .remove-image2:hover {
    background: #fb2c15;
    color: #ffffff;
    transition: all .2s ease;
    cursor: pointer;
  }
  
  .remove-image1:active,
  .remove-image2:active {
    border: 0;
    transition: all .2s ease;
  }

function getImage(input, v) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('.image-upload-wrap'+v).hide();
            $('.file-upload-image'+v).attr('src', e.target.result);
            $('.file-upload-content'+v).show();
            $('.image-title'+v).html(input.files[0].name);
        };
        reader.readAsDataURL(input.files[0]);
    } else {
        delUpload(v);
    }
}

function delUpload(v) {
    $('.file-upload-input'+v).replaceWith($('.file-upload-input'+v).clone());
    $('.file-upload-content'+v).hide();
    $('.image-upload-wrap'+v).show();
    $('.file-upload-input'+v).val('');
}


$('.image-upload-wrap1').bind('dragover', function () {
    $('.image-upload-wrap1').addClass('image-dropping');
});
$('.image-upload-wrap1').bind('dragleave', function () {
    $('.image-upload-wrap1').removeClass('image-dropping');
});

$('.image-upload-wrap2').bind('dragover', function () {
    $('.image-upload-wrap2').addClass('image-dropping');
});
$('.image-upload-wrap2').bind('dragleave', function () {
    $('.image-upload-wrap2').removeClass('image-dropping');
});
Timeline style08

Timeline style08

Timeline style06

Timeline style06

Scroll to div ID

Scroll to div ID

Radio button style

Radio button style

Profile page with b4

Profile page with b4

Page 404 exemple 01

Page 404 exemple 01

Image hover 07

Image hover 07

Header with background animate 01

Header with background animate 01

Dropdown right aligned B4

Dropdown right aligned B4

Bloc resizable with jquery

Bloc resizable with jquery

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table