Multiple Image Upload With Preview And Delete JQuery

Today, In this tutorial, We will learn how to upload multiple images with preview and delete. In this tutorial, we will show you jQuery multiple image upload with preview and delete demo.

In this tutorial, we can upload many images at once, that too in a very easy way, then today we will upload jquery multiple image upload with preview.

[Multiple Image Upload] With Preview And Delete JQuery - Step By Step

jQuery Multiple Image Upload With Preview and Delete Demo

below many steps to upload multiple images with preview and delete using the jQuery plugin:

1. Create Html File

We need to create one HTML file and put the below code into your file.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Multiple Image Upload with Preview and Delete jQuery Plugin - phpcodingstuff.com</title>
  </head>
  <body>
    <div id="drag-drop-area"></div>
  </body>
</html>

2. Include JQuery And CDN Libraries

Next, we need to include 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>

3. Full Source Code

Here this is the full source code to jquery multiple image upload with preview and delete demo:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Multiple Image Upload with Preview and Delete jQuery Plugin - phpcodingstuff.com</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 Optional Parameters

These 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 upload
allowedFileTypes null | array of wildcards image/*, exact mime types image/jpeg, or file extensions .jpg: ['image/*', '.jpg', '.jpeg', '.png', '.gif']

If you want to know more about this plugin, you can read the official document here

I hope it can help you...

Image Upload JQuery

Robert look

Author, Web Developer (Front-end & Back-end)

My Name is Robert look from New york, America. I'm a Web Application Developer with 6 years of experience. Currently, I'm working on front-end & back-end web development using popular web technology Languages. That's why I love to share my coding knowledge in a smart way.