Dropzone.js implementation of File drag and drop upload function (with source download) _javascript Tips

Dropzone.js is an Open-source JavaScript library that provides AJAX asynchronous file uploads, supports drag-and-drop files, supports maximum file size, supports setting file types, supports preview upload results, and does not rely on jquery libraries.

Effect Demo Source Download

Using 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 form element, and through the action attribute, upload the program to the background to receive the file, such as upload.php, just like accepting a very common file input form:

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

Then, in your upload.php to write upload code, dropzone official website to download only JS code, no backstage upload code, however, helloweba.com for you to provide a full version of PHP 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 and drop upload effect. Of course you can write your own style, or you can refer to our instance code.

There's also a situation where we don't want to have form forms in the HTML uploaded, so well, we just place a div#mydropzone in 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 invoked like this:

$ ("#dropz"). Dropzone ({ 
URL: "upload.php" 
})

Run your Web page, is not the same as can see the upload effect.

Configure Dropzone

The dropzone feature is very flexible, providing a number of options, events, and so on. The following are several 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 if necessary, you can change to put.

ParamName: Equivalent to the Name property of the <input> element, the default is file.

MaxFileSize: Maximum file size, in MB.

Maxfiles: Default is NULL, you can specify a numeric value and limit the maximum number of files.

Addremovelinks: Default false. If set to True, a delete link is added to the file.

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

Uploadmultiple: Indicates whether to allow Dropzone to submit multiple files at once. The default is False. If set to True, the equivalent HTML form adds the multiple property.

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

Init: A function that is invoked when the Dropzone is initialized, and can be used to add your own event listener.

Forcefallback:fallback is a mechanism that provides an alternative when the browser does not support this plug-in. The default is False. If set to true, force fallback.

Fallback: A function that is invoked if the browser does not support this plugin.

The above is a small set of dropzone.js to introduce the implementation of the file drag and drop upload, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!