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.











