In this demo you can upload with select in your computer or upload with url. when image upload then you can see live preview of image. you can also enable or disable image uploading. In this demo we are user bootstrap-imageupload plugin. this is bootstrap jquery plugin for image upload with preview.

We allows to free snippets of jquery image upload plugin in bootstrap , you can download full code of bootstrap image upload with preview layout. Here in this post i will give you example of bootstrap profile image upload example snippet and you will get simple code of html, css and jquery. In bootstrap multiple file upload with preview snippet i give you three tab with html, css and js, you can easily get code of plugins upload image bootstrap layout.


<!doctype html> <html lang="en"> <head> <title>Image Upload Jquery Plugin | Bootstrap 4</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="http://nicesnippets.com/demo/bootstrap-imageupload.js"></script> <link href="http://nicesnippets.com/demo/bootstrap-imageupload.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet"> </head> <body> <div class="container mt-5"> <div class="row"> <div class="col-md-12 col-sm-12 col-12"> <div class="row mb-3"> <div class="col-md-6 col-12"> <h3>Upload Image</h3> </div> <div class="col-md-6 col-12"> <div class="btn-group float-md-right float-xs-left"> <button type="button" id="imageupload-disable" class="btn btn-danger">Disable</button> <button type="button" id="imageupload-enable" class="btn btn-success">Enable</button> <button type="button" id="imageupload-reset" class="btn btn-primary">Reset</button> </div> </div> </div> <div class="row"> <div class="col-md-12 col-12"> <div class="imageupload card"> <div class="card-header clearfix"> <div class="btn-group"> <button type="button" class="btn btn-secondary active">File</button> <button type="button" class="btn btn-secondary">URL</button> </div> </div> <div class="file-tab card-body"> <label class="btn btn-default btn-file m-0 pl-0"> <span class="border rounded text-white ml-0 d-inline-block">Browse</span> <!-- The file is stored here. --> <input type="file" name="image-file"> </label> <button type="button" class="btn btn-info">Remove</button> </div> <div class="url-tab card-body"> <div class="input-group mb-3"> <input type="text" class="form-control hasclear" aria-describedby="basic-addon2"> <div class="input-group-append"> <button class="btn btn-secondary" type="button">Submit</button> </div> </div> <button type="button" class="btn btn-default">Remove</button> <input type="hidden" name="image-url"> </div> </div> </div> </div> </div> </div> </div> </body> </html>
body{ font-family: 'Ropa Sans', sans-serif; background: #d5d5d5; } .btn-file span{ background: #17a2b8; padding: 7px 14px; }
var $imageupload = $('.imageupload'); $imageupload.imageupload(); $('#imageupload-disable').on('click', function() { $imageupload.imageupload('disable'); $(this).blur(); }) $('#imageupload-enable').on('click', function() { $imageupload.imageupload('enable'); $(this).blur(); }) $('#imageupload-reset').on('click', function() { $imageupload.imageupload('reset'); $(this).blur(); });

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





Random Post