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

File Size: 54.5 KB
Views Total: 892
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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">

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

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

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


5. Limit the file format.

  "fileExt"   : ["png","jpg"]

6. Check and limit the file size.

  "fileSize_min"  : 0,
  "fileSize_max"  : 1, // 1 mb

7. Change the placeholder text inside the file input.

  "text": "Upload Picture here ..."

Change log:


  • 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.