File Upaload Prive And Remove Button In Html Css And Jquery Example

 

#File Upaload Prive And Remove Button In Html Css And Jquery Example

CSS Coed

  

<style> body { font-family: sans-serif; background: rgb(6,255,185); background: linear-gradient(187deg, rgba(6,255,185,1) 0%, rgba(9,121,16,1) 35%, rgba(255,222,0,1) 100%); background-repeat: repeat-x; height: 606px; } .file-upload { background-color: #ffffff; width: 600px; margin: 0 auto; padding: 20px; } .file-upload-btn { width: 100%; margin: 0; color: #fff; background: rgb(2,0,36); background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); 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: #ffc400; color: #ffffff; transition: all .2s ease; cursor: pointer; } .file-upload-btn:active { border: 0; transition: all .2s ease; } .file-upload-content { display: none; text-align: center; } .file-upload-input { position: absolute; margin: 0; padding: 0; width: 100%; height: 100%; outline: none; opacity: 0; cursor: pointer; } .image-upload-wrap { margin-top: 20px; border: 4px dashed #ffd900; position: relative; } .image-dropping, .image-upload-wrap:hover { background-color: #ffc508; border: 4px dashed #ffffff; } .image-title-wrap { padding: 0 15px 15px 15px; color: #222; } .drag-text { text-align: center; } .drag-text h3 { font-weight: 100; text-transform: uppercase; color: #00ff80; padding: 60px 0; } .file-upload-image { max-height: 200px; max-width: 200px; margin: auto; padding: 20px; } .remove-image { width: 200px; margin: 0; color: #fff; background: #ff1900; border: none; padding: 10px; border-radius: 4px; border-bottom: 4px solid #e61700; transition: all .2s ease; outline: none; text-transform: uppercase; font-weight: 700; } .remove-image:hover { background: #c13b2a; color: #ffffff; transition: all .2s ease; cursor: pointer; } .remove-image:active { border: 0; transition: all .2s ease; } </style>  

Html Cord

  

<div class="file-upload"> <button class="file-upload-btn" type="button" onclick="$('.file-upload-input').trigger( 'click' )">Add Image</button> <div class="image-upload-wrap"> <input class="file-upload-input" type='file' onchange="readURL(this);" accept="image/*" /> <div class="drag-text"> <h3>Drag and drop a file or select add Image</h3> </div> </div> <div class="file-upload-content"> <img class="file-upload-image" src="#" alt="your image" /> <div class="image-title-wrap"> <button type="button" onclick="removeUpload()" class="remove-image">Remove <span class="image-title">Uploaded Image</span></button> </div> </div> </div>   

JS Cord

  

<script class="jsbin" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('.image-upload-wrap').hide(); $('.file-upload-image').attr('src', e.target.result); $('.file-upload-content').show(); $('.image-title').html(input.files[0].name); }; reader.readAsDataURL(input.files[0]); } else { removeUpload(); } } function removeUpload() { $('.file-upload-input').replaceWith($('.file-upload-input').clone()); $('.file-upload-content').hide(); $('.image-upload-wrap').show(); } $('.image-upload-wrap').bind('dragover', function () { $('.image-upload-wrap').addClass('image-dropping'); }); $('.image-upload-wrap').bind('dragleave', function () { $('.image-upload-wrap').removeClass('image-dropping'); }); </script>  

Quick Set-Up Upload File Html Code

How To Use Source Code

1. Create New Index.html File
2. Copy Css Box
3. Add Style In Head Tag 
4. Copy JS Box
5. Add Script In Body Tag Closing 

Very Simple File Input Type Upload Design Card Use Only Html Css And Js Use For Free Multipule Image Not Saport Only 1 Image Saport Input Box But Drag And Drop Image Upload Functionality Is Available