File drag and drop

这篇翻译不完整。请帮忙从英语翻译这篇文章

HTML拖放接口使Web应用程序可以在网页上拖放文件。 本文档描述了应用程序如何接受从底层平台的文件管理器拖放并放在网页上的一个或多个文件。

The main steps to  drag and drop are to define a drop zone (i.e. a target element for the file drop) and to define event handlers for the drop, dragover and dragend events. These steps are described below, including example code snippets. The full source code is available in MDN's drag-and-drop repository (pull requests and/or issues are welcome).

Note: HTML drag and drop defines two different APIs to support dragging and dropping files. One API is the DataTransfer interface and the second API is the DataTransferItem and DataTransferItemList interfaces. This example illustrates the use of both APIs (and does not use any Gecko specific interfaces).

Define the drop zone

The target element of the drop event needs an ondrop global event handler. The following code snippet shows how this is done with a <div> element:

<div id="drop_zone" ondrop="drop_handler(event);">
  <strong>Drag one or more files to this Drop Zone ...</strong>
</div>

Typically, an application will include a dragover event handler on the drop target element and that handler will turn off the browser's default drag behavior. To add this handler, you need to  include a ondragover global event handler:

<div id="drop_zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
  <strong>Drag one or more files to this Drop Zone ...</strong>
</div>

Additionally, after a drag and drop operation has been completed, an application should remove the drag's data items (in this case one or more files). This cleanup is typically done when the dragend event is fired. The ondrop global event handler should be set on the drop target element:

<div id="drop_zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event);">
  <strong>Drag one or more files to this Drop Zone ...</strong>
</div>

Lastly, an application may want to style the drop target element to visually indicate the element is a drop zone. In this example, the drop target element uses the following styling:

drop_zone {
  border: 5px solid blue;
  width:  200px;
  height: 100px;
}

Process the drop

The drop event is fired when the user drops the file(s). In the following drop handler, if the browser supports DataTransferItemList interface, the getAsFile() method is used to access each file; otherwise the DataTransfer interface's files property is used to access each file.

This example shows how to write the name of each dragged file to the console. In a real application, an application may want to process a file using  the File API.

Note that in this example, any drag item that is not a file is ignored.

function drop_handler(ev) {
  console.log("Drop");
  ev.preventDefault();
  // If dropped items aren't files, reject them
  var dt = ev.dataTransfer;
  if (dt.items) {
    // Use DataTransferItemList interface to access the file(s)
    for (var i=0; i < dt.items.length; i++) {
      if (dt.items[i].kind == "file") {
        var f = dt.items[i].getAsFile();
        console.log("... file[" + i + "].name = " + f.name);
      }
    }
  } else {
    // Use DataTransfer interface to access the file(s)
    for (var i=0; i < dt.files.length; i++) {
      console.log("... file[" + i + "].name = " + dt.files[i].name);
    }  
  }
}

Prevent the browser's default drag behavior

The following dragover event handler calls preventDefault() to turn off the browser's default drag and drop handler.

function dragover_handler(ev) {
  console.log("dragOver");
  // Prevent default select and drag behavior
  ev.preventDefault();
}

Cleanup

The dragend handler is fired when the drag operation ends (signaling the drop has occurred or the drag has been canceled). In the following handler, if the browser supports the DataTransferItemList interface, the list's remove() method is used to delete the file drag data; otherwise the DataTransfer object's remove() method is used to delete the data.

function dragend_handler(ev) {
  console.log("dragEnd");
  // Remove all of the drag data
  var dt = ev.dataTransfer;
  if (dt.items) {
    // Use DataTransferItemList interface to remove the drag data
    for (var i = 0; i < dt.items.length; i++) {
      dt.items.remove(i);
    }
  } else {
    // Use DataTransfer interface to remove the drag data
    ev.dataTransfer.clearData();
  }
}

See also

文档标签和贡献者

标签: 
 此页面的贡献者: BenoitEsnard, xgqfrms-GitHub
 最后编辑者: BenoitEsnard,