js 怎么实现拖入文件框

在 HTML 中创建一个文件拖拽区域：

<div id="file-drop-zone">Drop file here</div>

然后，使用 JavaScript 添加事件监听器，以便当文件被拖放到区域时执行操作：

// 获取文件拖拽区域元素
const dropZone = document.getElementById('file-drop-zone');

// 添加拖拽事件监听器
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileDrop, false);

// 处理拖拽事件
function handleDragOver(event) {
  event.stopPropagation();
  event.preventDefault();
  event.dataTransfer.dropEffect = 'copy'; // 显示“复制”图标
}

// 处理文件拖拽事件
function handleFileDrop(event) {
  event.stopPropagation();
  event.preventDefault();

  // 获取文件列表
  const fileList = event.dataTransfer.files;

  // 处理文件列表
  for (const file of fileList) {
    console.log(file.name); // 输出文件名
    // TODO: 处理文件
  }
}

`handleFileDrop` 函数用于处理文件列表。您可以在此函数中执行对文件的任何操作，例如上传到服务器或显示文件内容。