html5拖拽文件上传需阻止默认事件

作者：System 时间：2024年08月24日分类：所有,html5 字数：855




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and Drop File Upload</title>
<script>
  function dragOver(event) {
    event.stopPropagation();
    event.preventDefault();
    event.dataTransfer.dropEffect = 'copy';
  }
 
  function drop(event) {
    event.stopPropagation();
    event.preventDefault();
    const files = event.dataTransfer.files;
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      // 这里可以添加上传逻辑
      console.log('文件名:', file.name);
    }
  }
</script>
</head>
<body>
<div id="dropZone" style="width: 300px; height: 200px; border: 2px dashed #aaa;"
     ondragover="dragOver(event)" ondrop="drop(event)">
  拖拽文件到此处上传
</div>
</body>
</html>

这段代码演示了如何创建一个可以拖拽文件到并通过HTML5的Drag and Drop API上传文件的区域。它阻止了默认的文件打开行为，并设置了合适的样式。在实际应用中，你可以在drop函数中添加上传文件的逻辑。

html5拖拽文件上传需阻止默认事件

评论已关闭

推荐阅读