HTML5 specifies whether to copy, move or link the attribute dropzone when dragging the dragged data.

Example

Drag data will produce a copy of the dragged data:

<div dropzone="copy"></div>

Browser support

Currently all major browsers do not support dropzone Attributes.

Definition and Usage

The dropzone attribute specifies whether to copy, move or link the dragged data when dragging data on an element.

Differences between HTML 4.01 and HTML5

The dropzone attribute is new in HTML5.

Syntax

<element dropzone="copy|move|link">

Attribute value

Value	Description
copy	Drag data will produce a copy of the dragged data.
move	Drag data will cause the dragged data to be moved to a new location.
#link	Dragging the data will generate a link to the original data.

The typical way to use dropzone is to create a form element that contains dropzone in the class attribute

<form action="/file-upload"
      class="dropzone"
      id="my-awesome-dropzone"></form>

<script>var myDropzone = new Dropzone("div#myId", { url: "/file/post"});</script>

Case

$("#dropz").dropzone({
        url: "index.php", //必须填写
        method:"post",  //也可用put
        paramName:"Filedata", //默认为file
        maxFiles:10,//一次性上传的文件数量上限
        maxFilesize: 20, //MB
        acceptedFiles: ".jpg,.gif,.png", //上传的类型
        previewsContainer:"#adds", //显示的容器
        parallelUploads: 3,
        dictMaxFilesExceeded: "您最多只能上传10个文件！",
        dictResponseError: '文件上传失败!',
        dictInvalidFileType: "你不能上传该类型文件,文件类型只能是*.jpg,*.gif,*.png。",
        dictFallbackMessage:"浏览器不受支持",
        dictFileTooBig:"文件过大上传文件最大支持.",
        previewTemplate: document.querySelector('#preview-template').innerHTML,//设置显示模板
        init:function(){
            this.on("addedfile", function(file) { 
            //上传文件时触发的事件
            });            this.on("queuecomplete",function(file) {
                //上传完成后触发的方法
            });            this.on("removedfile",function(file){
                //删除文件时触发的方法
                 });
            });
        }

    });

The above is the detailed content of HTML5 specifies whether to copy, move or link the attribute dropzone when dragging the dragged data.. For more information, please follow other related articles on the PHP Chinese website!