Minimal jQuery Based File Input With Image Preview - LoadImg.js

LoadImg.js is a super simple jQuery file input plugin which allows the user to select/load local pictures with support for image preview, auto resizing and file size/extension validation.

How to use it:

1. Load the required style sheet loadimg.min.css in the head of the html page.

<link rel="stylesheet" href="loadimg.min.css">

2. Wrap the file input into a label.

<label id="upload">
  <input type="file">
</label>

3. Load the JavaScript file loadimg.min.js after jQuery library but before the closing body tag.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="assets/js/loadimg.min.js"></script>

4. Call the plugin on the label element and done.

$('#upload').loadImg();

5. Limit the file format.

$('#upload').loadImg({
  "fileExt"   : ["png","jpg"]
});

6. Check and limit the file size.

$('#upload').loadImg({
  "fileSize_min"  : 0,
  "fileSize_max"  : 1, // 1 mb
});

7. Change the placeholder text inside the file input.

$('#upload').loadImg({
  "text": "Upload Picture here ..."
});

Change log:

2016-10-03

• add exist-img option

---

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