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 style04

Timeline style04

Page 404 exemple 01

Page 404 exemple 01

Nav Menu style02

Nav Menu style02

Loading style book loader

Loading style book loader

Lightbox gallery style01

Lightbox gallery style01

Input range slider HTML style03

Input range slider HTML style03

Image hover 06

Image hover 06

Image hover 03

Image hover 03

Image hover 02

Image hover 02

Geocoded Locations

Geocoded Locations

Footer Responsive avec Bootstrap4

Footer Responsive avec Bootstrap4

Comment intégrer yamli dans une input

Comment intégrer yamli dans une input