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');
});
Ajouter multiple input dynamique

Ajouter multiple input dynamique

Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table

Asidebar Bootstrap4 style01

Asidebar Bootstrap4 style01

Card Panel Bootstrap4 with header and footer

Card Panel Bootstrap4 with header and footer

Cards box with title

Cards box with title

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Form Création de compte

Form Création de compte

Input range slider HTML style02

Input range slider HTML style02

Pie Charts

Pie Charts

texte animate effects style 01

texte animate effects style 01

toggle switch style01

toggle switch style01

up down tr in table with js

up down tr in table with js