How to upload files using jQuery Dropzone Plugin ? - GeeksforGeeks

29 Jun, 2020
jQuery has many types of file upload plugins that are used to upload various types of files and can be processed further at the backend. Usually, PHP is used widely as backend language with ajax call. We also have dynamic jQuery plugins where we can drag and drop the files.
Some of the file uploader plugins are:
Fine-Uploader
JQuery File upload
Uploadify
Plupload
Formstone upload
Dropzone
Many more are available.
CDN Link:
<script src=”https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/dropzone.min.js” integrity=”sha256-fegGeSK7Ez4lvniVEiz1nKMx9pYtlLwPNRPf6uc8d+8=” crossorigin=”anonymous”></script>
Example: The following example is implemented using Dropzone plugin and CDN libraries required for the code.
<!DOCTYPE html><html>  <head>      <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content=        "width=device-width,         initial-scale=1, shrink-to-fit=no">      <!-- Bootstrap CSS -->    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"        crossorigin="anonymous">      <!-- jQuery first, then Popper.js,         then Bootstrap JS -->    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"        crossorigin="anonymous">    </script>          <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/dropzone.min.js"        integrity="sha256-fegGeSK7Ez4lvniVEiz1nKMx9pYtlLwPNRPf6uc8d+8="        crossorigin="anonymous">    </script>      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"        crossorigin="anonymous">    </script>      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"        crossorigin="anonymous">    </script>      <style>        body {            padding: 2%;        }    </style></head>  <body>    <form action="/file-upload" class="dropzone">        <div class="fallback">            <input name="file" type="file" multiple />        </div>    </form></body>  </html> 
Output:
Conclusion: In the above example, we can drag many documents at one go. We can perform the same operation by only JavaScript code and we can also put constraints on the size and type of the file also.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
jQuery-Misc
Picked
CSS
HTML
JQuery
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
How to apply style to parent if it has child with CSS?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
How to set space between the flexbox ?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)