Minimal Image File Input With Preview Support - jQuery imgEdit

File Size: 3.82 KB
Views Total: 716
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal Image File Input With Preview Support - jQuery imgEdit

imgEdit is a very small jQuery plugin which converts a standard img tag into a file input for selecting a local image with file preview support.

How to use it:

1. Add jQuery JavaScript and the jQuery imgEdit plugin's script to the web page.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="imgEdit.js"></script>

2. Create a placeholder image for the file input.

<img src="placeholder.jpg" id="target">

3. Create a target form where you want to inject the file input to.

<form action="" method="POST" id="target-form"></form>

4. Call the function on the placeholder image and done.

$("#target").imgEdit({
  inputName : "profile-picture",
  form : "#target-form",
});

5. Default plugin options.

$("#target").imgEdit({
  inputName : "profile-picture",
  form : "#profile"
});

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