Drag and Drop Files in bootstrap 4. In this Drag and Drop example also you can see preview of uploaded files. In this demo you can also select files from your computer. we are provide browse button for select image. You can also show option like upload image,delete and view image detail option are available.

We allows to free snippets of drag and drop file upload example , you can download full code of drag and drop file upload tutorial layout. Here in this post i will give you example of drag and drop file upload with submit button snippet and you will get simple code of html, css and jquery. In bootstrap file upload progress bar snippet i give you three tab with html, css and js, you can easily get code of bootstrap drag and drop with image preview layout.


<!DOCTYPE html> <html lang="en"> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body class="bg-danger"> <div class="container"> <div class="row"> <div class="col-lg-8 col-sm-12 col-11 main-section"> <h1 class="text-center text-danger">File Input Example</h1><br> <form enctype="multipart/form-data"> <div class="form-group"> <div class="file-loading"> <input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2"> </div> </div> </form> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/js/fileinput.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/themes/fa/theme.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" type="text/javascript"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script> </body> </html>
.main-section{ margin:0 auto; padding: 20px; margin-top: 100px; background-color: #fff; box-shadow: 0px 0px 20px #c1c1c1; } .fileinput-remove, .fileinput-upload{ display: none; }
$("#file-1").fileinput({ theme: 'fa', uploadUrl: '#', allowedFileExtensions: ['jpg', 'png', 'gif'], overwriteInitial: false, maxFileSize:2000, maxFilesNum: 10, slugCallback: function (filename) { return filename.replace('(', '_').replace(']', '_'); } });

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Related Post

Bootstrap 4 user profile design usign with html and css

Bootstrap 4 user profile design usign with html and css

We provide bootstrap 4 user profile design. we provide new design of profile. bo...

Read More
Bootstrap 4 div structure and how to use bootstrap 4 div class ?

Bootstrap 4 div structure and how to use bootstrap 4 div cla...

Here We explain how to work bootstrap 4 column structure. ".col-" class work...

Read More
Bootstrap 4 new button style

Bootstrap 4 new button style

Here we create small example for bootstrap 4 new button style. you can simply us...

Read More

Random Post