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

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.