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 une legende dans un formulaire

Ajouter une legende dans un formulaire

Alert Bootstrap4 style02

Alert Bootstrap4 style02

Card Bootstrap4 02

Card Bootstrap4 02

Elastic Content Slider

Elastic Content Slider

Image hover 03

Image hover 03

Image hover 04

Image hover 04

Lightbox gallery style01

Lightbox gallery style01

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Vers le haut

Vers le haut

Vidéo background en html5 style02

Vidéo background en html5 style02

bootstrap4 tabs

bootstrap4 tabs

creation dune icone de prechargement avec css

creation dune icone de prechargement avec css