jQuery Drag & Drop File Uploader Plugin – Image-Uploader

Form
Drag and Drop File Uploading With jQuery - Image Uploader
File Size: 176.32 KB
Views Total: 5225 views
Last Update:March 08, 2024
Publish Date: July 16, 2019
Official Website: Go to website
License: MIT
Plugin Author: christianbayer
Demo    Download

Image-Uploader, in this image-uploader server you can upload any image with the simple JQuery Drag and Drop image uploader plugin on your website. You can use this plugin in the forms like questionnaire forms, sign up forms, etc.
In the world of responsive website this image uploader plugin is very useful as it is designed according to your needs. For example: In this image upoader plugin you can use various customizations like preloaded images, labeling images, different extensions like (.jpg, .jpeg, .png, .gif, .svg)
The main importance of this plugin is that you do not need to use AJAX, as this plugin works with simple JQuery drag and drop.
In the given demo you can see, how this plugin can be used:

The first one is the “Basic Usage”:
You just need to upload your image in the Drag and Drop button. You can upload multiple images by the use of this plugin.

The Second one is “With Options”:
The next is similar to the first one but in this you can use NAME, DESCRIPTIONS with the multiple images in paddling styles.

This Jquery usage reduces the user’s clumsiness and improves user-friendliness, and also enhances the user experience.

How To Used:

First, include jQuery library and second ‘image-uploadeer’ library files in your web page.

<link href="dist/image-uploader.min.css" rel="stylesheet">
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="dist/image-uploader.min.js"></script>

Create a container element for the drag’n’drop file selection area.

<form action="url" enctype="multipart/form-data">
  <div class="input-images"></div>
</form>

Add jQuery Function call

$(function(){
  $('.input-images').imageUploader();
});

Define an array of pre-select images.

let preloaded = [
    {id: 1, src: '1.jpg'},
    {id: 2, src: '2.jpg'},
    {id: 3, src: '3.jpg'},
    // more images here
];

$('.input-images').imageUploader({
  preloaded: preloaded
});

Specify the allowed extension, mime type, max files, and max file size.

$('.input-images').imageUploader({
  extensions: ['.jpg', '.jpeg', '.png', '.gif', '.svg'],
  mimes: ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml'],
  maxSize: undefined,
  maxFiles: undefined,
});

Done

Thanks for make jQuery plugin is developed by christianbayer For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :
  • v1.2.3
  • v1.2.2
  • v1.2.1
  • v1.2.0
  • v1.1.0
  • v1.0.0

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.