Image Upload Preview Plugin With jQuery And Bootstrap - img-upload

Image Upload Preview Plugin With jQuery And Bootstrap - img-upload
File Size: 17 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

img-upload is a tiny jQuery plugin that allows you to upload local or remote image files (JPG, PNG and GIF) with live preview, styling with Twitter Bootstrap.

How to use it:

1. Load Bootstrap's stylesheet and the img-upload.css in the head section of the document.

<link rel="stylesheet" href="bootstrap.min.css">
<link href="css/bootstrap-imgupload.css" rel="stylesheet">

2. Build the html structure for the image uploader ui with a preview area.

<form>
  <div class="form-group">
    <div class="imgupload panel panel-default">
      <div class="panel-heading clearfix">
        <h3 class="panel-title pull-left">Upload image</h3>
        <div class="btn-group pull-right">
          <button type="button" class="btn btn-default active">File</button>
          <button type="button" class="btn btn-default">URL</button>
        </div>
      </div>
      <div class="file-tab panel-body">
        <div>
          <button type="button" class="btn btn-default btn-file">
          <span>Browse</span>
          <input type="file" name="file-input">
          </button>
          <button type="button" class="btn btn-default">Remove</button>
        </div>
      </div>
      <div class="url-tab panel-body">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Image URL">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default">Submit</button>
          </div>
        </div>
        <input type="hidden" name="url-input">
      </div>
    </div>
  </div>
</form>

3. Load both jQuery library and the jQuery img-upload plugin's script at the end of the document.

<script src="//code.jquery.com/jquery-1.12.2.min.js"></script>
<script src="js/bootstrap-imgupload.js"></script>

4. Call the imgUpload() function to active the plugin.

$('.img-upload').imgupload();

5. Available plugin options.

$('.img-upload').imgupload({
  allowedFormats: [ "jpg", "jpeg", "png", "gif" ],
  previewWidth: 250,
  previewHeight: 250,
  maxFileSizeKb: 2048
});

Change log:

2016-10-12

  • Fixed browse button text after cancelling change file dialog.

2016-09-14

2016-08-06

  • Fixed bug causing "browse" button not to work in Firefox and Internet Explorer.
  • URL is now checked before submitting (do nothing if empty).
  • Alerts are now displayed above instead of below.
  • Improved clarity of some error messages.
  • Image thumbnail is now displayed as a Bootstrap thumbnail.

2016-05-22

  • Changed CSS to K&R formatting style.

2016-03-26

  • Fixed a bug causing the submit button to persist after an error uploading from URL.

This awesome jQuery plugin is developed by egonolieux. For more Advanced Usages, please check the demo page or visit the official website.