javascript 文件拖放

📌 相关文章

📜 javascript 文件拖放 - Javascript (1)

📅 最后修改于: 2023-12-03 15:16:13.029000 🧑 作者: Mango

在 HTML5 中，可以使用 JavaScript 对文件进行拖放操作。下面将介绍如何制作一个简单的文件拖放应用程序。

HTML 结构

首先，需要创建一个 HTML 文件，包含一个文件拖放区域和一些用于显示文件信息的元素。

<!DOCTYPE html>
<html>

<head>
  <title>JavaScript 文件拖放</title>
  <style>
    #drop-area {
      width: 200px;
      height: 200px;
      border: 2px dashed #ccc;
      padding: 20px;
      font-size: 20px;
      text-align: center;
    }
  </style>
</head>

<body>
  <div id="drop-area">将文件拖放至此处</div>
  <div id="file-info"></div>
</body>

</html>

JavaScript 代码

接下来，需要为文件拖放区域添加拖放事件监听器，并处理拖放事件。

// 获取文件拖放区域和用于显示文件信息的元素
const dropArea = document.getElementById('drop-area');
const fileInfo = document.getElementById('file-info');

// 阻止浏览器默认行为以避免意外打开文件
function preventDefault(e) {
  e.preventDefault();
  e.stopPropagation();
}

// 处理拖放事件
function handleDrop(e) {
  // 阻止浏览器默认行为
  preventDefault(e);

  // 获取拖放的文件列表
  const files = e.dataTransfer.files;

  // 显示文件信息
  fileInfo.innerHTML = '';
  for (const file of files) {
    const name = file.name;
    const type = file.type || 'unknown';
    const size = file.size;
    fileInfo.innerHTML += `<p>${name} (${type}, ${size} bytes)</p>`
  }
}

// 添加拖放事件监听器
dropArea.addEventListener('dragenter', preventDefault);
dropArea.addEventListener('dragover', preventDefault);
dropArea.addEventListener('drop', handleDrop);

效果演示

现在可以在浏览器中打开 HTML 文件，将一个或多个文件拖放到拖放区域，应用程序将显示文件信息。

文件拖放效果演示

以上就是一个简单的 JavaScript 文件拖放应用程序。