jQuery Image Drag Component Dropzone Usage Sample

2021-07-12 04:35:39
OfStack

This article illustrates the usage of jQuery picture drag component Dropzone. Share it for your reference, as follows:

Main functions of dropzone: support dragging picture upload, provide picture preview, etc. Reference address: http://www.dropzonejs.com

1. Installing npm install dropzone will download 1 dropzone

2. dropzone folder dist has two files 1 dropzone. js 1 dropzone. css Add these two files to the page

3. Initialize Dropzone with the following code for demo


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="jquery.min.js"></script>
  <script src="dropzone.min.js"></script>
  <link rel="stylesheet" href="dropzone.css">
</head>
<body>
<div id="dropz" class="dropzone"></div>
<script>
  $(function () {
    $("#dropz").dropzone({
      url: "fileUpload.htm",
      maxFiles: 10,
      maxFilesize: 512,
      acceptedFiles: ".jpg"
    });
  })
</script>
</body>
</html>

More readers interested in jQuery can check the topics of this site: "Summary of Common Plugins and Usage of jQuery", "Summary of Extension Skills of jQuery", "Summary of Switching Effects and Skills of jQuery", "Summary of Traversal Algorithms and Skills of jQuery", "Summary of Common Classic Effects of jQuery" and "Summary of Usage of jquery Selector"

I hope this article is helpful to everyone's jQuery programming.