jQuery multiple image upload with preview and delete; Through this tutorial, i am going to show you how to upload multiple image with preview and delete using jQuery.
This jQuery image upload preview and delete plugin is very lightweight and easy to use for upload multiple image with preview and delete feature. This plugin also supports drag & drop functionality to upload multiple images.
jQuery Multiple Image Upload With Preview and Delete
- 1. Create Html File
- 2. Include jQuery and CDN libraries
- 3. Complete Source Code
- Validation Rules and Parameters of jQuery Image Upload Preview and Delete
1. Create Html File
Create one HTML file and put the below code into your file; as shown below:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Multiple Image Upload with Preview and Delete jQuery Plugin</title> </head> <body> <div id="drag-drop-area"></div> </body> </html>
2. Import jQuery and CDN libraries
Import the jquery CDN libraries into the HTML file for uploading the multiple images with preview and delete using the jQuery plugin.
<link href="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.css" rel="stylesheet"> <script src="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.js"></script> <script>
3. Complete Source Code
Complete source code to upload multiple images with preview and delete in jQuery; as shown below:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Multiple Image Upload with Preview and Delete jQuery Plugin</title> <link href="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.css" rel="stylesheet"> </head> <body> <div id="drag-drop-area"></div> <script src="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.js"></script> <script> var uppy = Uppy.Core() .use(Uppy.Dashboard, { inline: true, target: '#drag-drop-area' }) .use(Uppy.Tus, {endpoint: 'https://master.tus.io/files/'}) //you can put upload URL here, where you want to upload images uppy.on('complete', (result) => { console.log('Upload complete! We’ve uploaded these files:', result.successful) }) </script> </body> </html>
Validation Rules and Parameters of jQuery Image Upload Preview and Delete
This jQuery multiple images upload with live preview plugin provide some important validation rules and optional parameters:
- Maxfilesize:- null | number — maximum file size in bytes for each individual file (total max size has been requested, and is planned)
- maxNumberOfFiles:- null | number — total number of files that can be selected
minNumberOfFiles
null | number — minimum number of files that must be selected before the uploadallowedFileTypes
null | array of wildcardsimage/*
, exact mime typesimage/jpeg
, or file extensions.jpg
:['image/*', '.jpg', '.jpeg', '.png', '.gif']