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');
});
Vers le haut

Vers le haut

Tablet style code texte

Tablet style code texte

Profile page with b4

Profile page with b4

Page construction avec compte à rebours style01

Page construction avec compte à rebours style01

Manual Slideshow

Manual Slideshow

Gallery images with bootstrap4 Flexbox

Gallery images with bootstrap4 Flexbox

Form login with background image changed style01

Form login with background image changed style01

Form Step With B4 Style01

Form Step With B4 Style01

Compteur avec b4

Compteur avec b4

Changer le style du scroll bar in html

Changer le style du scroll bar in html

Asidebar Menu Style01

Asidebar Menu Style01

Animation 3d social icones avec css3

Animation 3d social icones avec css3