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

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

• js update

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.