How to upload files using jQuery Dropzone Plugin ?
Last Updated :
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>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width,
initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href=
integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
integrity="sha256-fegGeSK7Ez4lvniVEiz1nKMx9pYtlLwPNRPf6uc8d+8="
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous">
</script>
<script src=
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...