文件输入框中event.preventDefault()未生效？其作用及实现需求咨询

嘿，咱们先把核心问题拆解清楚：event.preventDefault()到底阻止了什么，完全取决于你把它绑定在哪个事件上——不同场景下它的作用天差地别：

1. 如果绑定在change事件上（点击选择文件触发） #

当用户通过原生file input选择文件后触发的change事件，本身其实没有浏览器层面的默认行为（比如跳转页面、打开文件这类操作）。所以这时调用event.preventDefault()其实不会有任何可见的效果——你依然能拿到event.target.files，文件名也会正常显示在输入框旁，完全不影响文件被添加到FileList里。

2. 如果绑定在drop事件上（拖拽文件到页面/input区域） #

这才是event.preventDefault()真正发挥作用的核心场景：当用户把文件拖拽到页面（或input元素）上并松开鼠标时，浏览器的默认行为是自动打开/下载这个文件（比如图片会在新标签页打开，PDF会直接在浏览器预览）。这时候调用event.preventDefault()就是为了打断这个默认行为，让文件能被你的JavaScript代码捕获和处理（比如添加到input的FileList，或者手动放到FormData里）。

接下来结合你的需求，给你一套完整的实现方案：允许用户选择（或拖拽）文件，阻止不必要的默认行为，手动把文件加到FormData，同时动态生成待上传文件列表。

第一步：完善HTML结构 #

我们需要一个file input（可以隐藏用自定义按钮触发），加上一个用来显示文件列表的容器：

<!-- 隐藏原生input，用自定义按钮触发选择 -->
<input id="file-upload" name="files" type="file" multiple style="display: none;">
<button id="select-files-btn">选择文件</button>
<!-- 用来显示待上传文件的列表 -->
<div id="file-list-container"></div>
<!-- 可选：上传按钮 -->
<button id="upload-btn">开始上传</button>

第二步：JavaScript实现逻辑 #

我们要处理点击选择、拖拽文件、手动收集文件到FormData、动态渲染列表这几个核心逻辑：

const fileInput = document.getElementById('file-upload');
const selectBtn = document.getElementById('select-files-btn');
const fileListContainer = document.getElementById('file-list-container');
const uploadBtn = document.getElementById('upload-btn');
// 手动管理待上传文件数组（比依赖input的files更灵活）
let uploadedFiles = [];

// 点击自定义按钮触发原生文件选择弹窗
selectBtn.addEventListener('click', () => {
  fileInput.click();
});

// 处理文件选择事件（change）
fileInput.addEventListener('change', handleFileSelect);

// 处理拖拽过程：阻止默认高亮行为，让拖拽更友好
document.addEventListener('dragover', (event) => {
  event.preventDefault();
  document.body.style.backgroundColor = '#f0f8ff';
});

document.addEventListener('dragleave', () => {
  document.body.style.backgroundColor = '';
});

// 处理文件拖拽放下事件：核心是阻止浏览器打开文件的默认行为
document.addEventListener('drop', (event) => {
  event.preventDefault();
  document.body.style.backgroundColor = '';
  // 从拖拽事件中获取文件列表
  const files = Array.from(event.dataTransfer.files);
  handleFileSelect({ target: { files } }); // 复用选择文件的处理逻辑
});

// 统一处理文件选择/拖拽的逻辑
function handleFileSelect(event) {
  const files = Array.from(event.target.files);
  if (files.length === 0) return;

  // 避免重复添加相同文件（可选逻辑，按文件名+大小判断）
  const newFiles = files.filter(file => !uploadedFiles.some(f => f.name === file.name && f.size === file.size));
  uploadedFiles = [...uploadedFiles, ...newFiles];

  // 动态渲染待上传文件列表
  renderFileList();
}

// 渲染待上传文件列表
function renderFileList() {
  fileListContainer.innerHTML = '';
  uploadedFiles.forEach((file, index) => {
    const fileItem = document.createElement('div');
    fileItem.style.padding = '8px 0';
    fileItem.style.borderBottom = '1px solid #eee';
    fileItem.innerHTML = `
      <span>${file.name}</span>
      <span style="margin-left: 16px; color: #666;">${(file.size / 1024).toFixed(2)}KB</span>
      <button onclick="removeFile(${index})" style="margin-left: 16px; color: #dc3545; border: none; background: none; cursor: pointer;">移除</button>
    `;
    fileListContainer.appendChild(fileItem);
  });
}

// 移除指定文件
function removeFile(index) {
  uploadedFiles.splice(index, 1);
  renderFileList();
}

// 点击上传按钮时，手动将文件添加到FormData并发送请求
uploadBtn.addEventListener('click', () => {
  if (uploadedFiles.length === 0) {
    alert('请先选择要上传的文件');
    return;
  }

  const formData = new FormData();
  // 手动将文件添加到FormData
  uploadedFiles.forEach(file => {
    formData.append('files', file);
  });

  // 用fetch发送上传请求（替换成你的后端接口地址）
  fetch('/your-upload-api', {
    method: 'POST',
    body: formData
  }).then(res => res.json()).then(data => {
    console.log('上传成功', data);
    // 上传成功后清空列表
    uploadedFiles = [];
    renderFileList();
  }).catch(err => {
    console.error('上传失败', err);
  });
});

关键要点说明 #

• 对于drop事件，event.preventDefault()是必须的，否则浏览器会直接打开拖拽的文件，你的代码就无法捕获和处理文件了。
• 手动管理uploadedFiles数组比直接依赖input的files属性更灵活，支持移除文件、去重、批量操作等需求。
• 动态生成的文件列表可以自定义样式，让用户直观看到待上传文件的名称、大小，还支持移除操作，提升用户体验。

内容的提问来源于stack exchange，提问作者J86