image uploader imagify - Free Download Highly Customizable Image Uploader Plugin - jQuery Imagify

Free Download Highly Customizable Image Uploader Plugin – jQuery Imagify

By Posted on

This time I will share jQuery Plugin and tutorial about Highly Customizable Image Uploader Plugin – jQuery Imagify, hope it will help you in programming stack.

image uploader imagify - Free Download Highly Customizable Image Uploader Plugin - jQuery Imagify
File Size: 7.57 KB
Views Total: 820
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Imagify is a lightweight yet highly customizable image uploader with quality control, thumbnail preview, custom label and much more.

More features:

  • Allows you to set the min/max dimension.
  • Allows you to set the min/max image size.
  • Allows you to restrict the file extension.
  • Error handling.
  • Works with the native file input.

How to use it:

1. Download & unzip the plugin and then include the Imagify plugin’s files on the webpage which has jQuery library installed.

view source
1 <link href="/path/to/imagify.css" rel="stylesheet">
2 <script src="/path/to/jquery.min.js"></script>
3 <script src="/path/to/imagify.js"></script>

2. Create a container element to hold the image uploader.

view source
1 <div id="example"></div>

3. Attach the function to the container element to initialize a basic image uploader.

view source
1 $(function(){
2   $('#example').imagify();
3 });

4. Config the image uploader using the following data-OPTION attributes:

  • data-min-file-size: min file size (mb)
  • data-max-file-size: max file size
  • data-max-width: max width (px)
  • data-min-width: min width
  • data-max-height: max height
  • data-min-height: min height
  • data-allowed-file-extensions: allowed file extensions
view source
1 <div id="example"
2      data-min-width="640"
3      data-min-height="960">
4      ... more options here
5 </div>

5. You can also pass these options via JavaScript:

view source
01 $('#example').imagify({
02  
03   minSize: 0,
04   maxSize: 1,
05   maxSizeErrorMessage: 'Imagify : Max size error !',
06   minSizeErrorMessage: 'Imagify : Min size error !',
07  
08   maxWidth: 2000,
09   minWidth: 1,
10   maxHeight: 3000,
11   minHeight: 1,
12   dimensionErrorMessage: 'Imagify : Dimension error',
13  
14   allowedExt: 'jpg jpeg png',
15   allowedExtErrorMessage: 'Imagify : Not allowed image extension !'
16    
17 });

6. More customization options:

view source
01 $('#example').imagify({
02  
03   // additional CSS styles
04   style: 'border: 1px solid #ccc;',
05  
06   // shows image preview
07   showThumb: true,
08  
09   // uses data attributes
10   feedElement: true,
11  
12   // default text
13   chooseText: "Choose Image",
14   changeFileText: "Change Image",
15  
16   // shows image label
17   showImageLabel: true
18  
19 });

7. Possible events to handle the image selection & errors.

view source
01 $('#example').imagify({
02  
03   onInit: function (elm) {
04     // do something 
05   });
06  
07   onSuccess: function (elm,source) {
08     // do something  
09   });
10  
11   onError: function (errorId) {
12     // do something  
13   });
14  
15   onDimensionError: function (file) {
16     // do something  
17   });
18  
19   onMinSizeError: function (file) {
20     // do something  
21   });
22  
23   onMaxSizeError: function (file) {
24     // do something  
25   });
26    
27   onAllowedExtError: function (file) {
28     // do something  
29   });
30  
31 });

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

source : jquery.net

Related posts: