Dropzone. js implements drag-and-drop file upload and dropzone. js drag-and-drop

Dropzone. js implements drag-and-drop file upload and dropzone. js drag-and-drop

Dropzone. js is an open-source JavaScript library that provides the AJAX asynchronous file upload function. It supports drag and drop, maximum file size, setting file types, previewing upload results, and does not rely on the jQuery library.

Use Dropzone

We can create a formal form for uploading the form and give the form A. dropzone class.

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

In this way, the Dropzone will automatically find. the form element of dropzone, and the program that uploads to the background to receive files through the action attribute, such as upload. php is like accepting a very common file input form:

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

Then, in your upload. php writes the upload code. The Dropzone official website only downloads js Code without background upload code. However, helloweba.com provides you with the php version of complete upload instance code. Please download the source code.

The next step is to introduce dropzone. js.

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

Then you don't need to do anything. Open the browser and test the drag-and-drop upload effect. Of course, you can write the style yourself or refer to our instance code.

In another case, we do not want to upload a form in the html file. Therefore, we only need to place a div # mydropzone in the html file.

<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, The jQuery version can be called as follows:

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

Run your webpage to see the upload effect.

Configure Dropzone

Dropzone is very flexible and provides many options and events. Below are several common configuration items in Dropzone.

Url: The most important parameter indicates the page on which the file is submitted.

Method: The default value is post. If necessary, you can change it to put.

ParamName: Equivalent to the name attribute of the <input> element. The default value is file.

MaxFilesize: Maximum file size, in MB.

MaxFiles: The default value is null. It can be specified as a value to limit the maximum number of files.

AddRemoveLinks: The default value is false. If it is set to true, a delete link is added to the file.

AcceptedFiles: Specifies the file type that can be uploaded. The format is a comma-separated MIME type or extension. For example: image/*, application/pdf,. psd,. obj

UploadMultiple: Indicates whether to allow Dropzone to submit multiple files at a time. The default value is false. If it is set to true, it is equivalent to adding the multiple attribute to the HTML form.

Headers: If set, it will be sent to the server as an additional header. Example: {"custom-header": "value "}

Init: A function called during Dropzone initialization. It can be used to add its own event listener.

ForceFallback: Fallback is a mechanism that provides an alternative solution when the browser does not support this plug-in. The default value is false. If it is set to true, fallback is forced.

Fallback: A function, called if the browser does not support this plug-in.