Dropzone.js implement file drag and drop upload

Dropzone.js is an open source JavaScript library that provides AJAX asynchronous file uploads, supports drag-and-drop files, supports maximum file sizes, supports set file types, supports preview upload results, and does not rely on the jquery library.

View Demo Download source Use Dropzone

We can create a formal upload form form and give the form a. Dropzone class.

<form id="mydropzone" action="/upload.php" class="dropzone"></form>

In this way, Dropzone will automatically find the. Dropzone form element, and through the Action property, upload the program to receive files in the background, such as upload.php, just like accepting a very common file input form:

<input type="file" name="file" />

Then, in your upload.php write upload code, dropzone official website to download only JS code, no backstage upload code, however, helloweba.com provide you with the PHP version of the full upload instance code, welcome to download the source.

The next step is to introduce dropzone.js.

<script src="dropzone.min.js"></script>

Then do nothing, open the browser, test drag upload effect. Of course you can write your own style, or you can refer to our example code.

In another case, we do not want to upload the HTML in the form form, so good, we just put a div#mydropzone in the HTML

<div id="mydropzone" class="dropzone"></div>

Then, configure the JS call:

var myDropzone = new Dropzone("div#mydropzone", { url: "upload.php"});

If you are using jquery, then the jquery version can be called:

 $("#dropz").dropzone({ 
    url: "upload.php" 
 })

Running your Web page is not the same as you can see the upload effect.

Configure Dropzone

Dropzone's features are very flexible, offering many options, events, and more. Here are a few common configuration items for dropzone.

URL: The most important parameter that indicates which page the file is submitted to.

method: The default is post, and you can change it to put if you want.

paramname: The Name property equivalent to the <input> element, which defaults to file.

maxfilesize: The maximum file size, in megabytes.

maxfiles: Default is NULL, can be specified as a numeric value, limit the maximum number of files.

addremovelinks: false by default. If set to True, a delete link is added to the file.

acceptedfiles: Indicates the type of file that is allowed to be uploaded, in the form of a comma-delimited MIME type or extension. Example: Image/*,application/pdf,.psd,.obj

uploadmultiple: Indicates whether to allow Dropzone to commit multiple files at once. The default is False. If set to true, it is equivalent to adding the Multiple property to the HTML form.

headers: If set, it will be sent as additional header information to the server. For example: {"Custom-header": "Value"}

init: A function that is called when Dropzone is initialized and can be used to add its own event listeners.

forcefallback: Fallback is a mechanism that provides an alternative when a browser does not support this plugin. The default is False. If set to true, fallback is enforced.

fallback: A function that is called if the browser does not support this plugin.

For more information about Dropzone, please refer to the official website: http://www.dropzonejs.com/

Dropzone.js implement file drag and drop upload