如何通过JavaScript自动化PC到拖拽式界面网站的文件上传？

由于前端JavaScript受浏览器安全策略限制，无法直接绕过系统文件管理器弹窗选择本地文件，要实现完整的自动化流程，需要结合以下方案：

1. 浏览器自动化工具（推荐：完全无人值守） #

这类工具可以直接操控浏览器底层API，无需触发系统文件选择弹窗，就能将本地文件注入到上传控件中，常用工具包括Puppeteer（适配Chrome/Edge）、Playwright（多浏览器兼容）。

Puppeteer实现示例 #

const puppeteer = require('puppeteer');

(async () => {
  // 启动可视化浏览器（headless: false 可看到操作过程）
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  
  // 打开目标上传页面
  await page.goto('你的目标上传页面URL');

  // 定位拖拽上传容器
  const uploadContainer = await page.$('#拖拽容器的CSS选择器');
  // 直接传入本地图片绝对路径，绕过文件管理器
  await uploadContainer.uploadFile('/Users/xxx/Desktop/target-image.jpg');

  // 等待上传完成（根据页面实际加载情况调整等待时间）
  await page.waitForTimeout(3000);

  // 点击发送按钮
  await page.click('#发送按钮的CSS选择器');

  // 关闭浏览器
  await browser.close();
})();

• 操作前提：提前通过npm install puppeteer安装依赖，确保传入的文件路径为本地绝对路径。

2. 用户脚本+手动授权（半自动化） #

如果不想搭建Node.js环境，可以用Tampermonkey等用户脚本工具，但需要用户手动选择一次文件以获取File对象，后续可复用该对象完成自动上传：

// ==UserScript==
// @name  图片自动上传脚本
// @match 你的目标网站URL
// ==/UserScript==

let targetImageFile;

// 第一步：让用户手动选择一次图片，保存File对象
function selectFileManually() {
  const fileInput = document.createElement('input');
  fileInput.type = 'file';
  fileInput.accept = 'image/*';
  fileInput.onchange = () => {
    targetImageFile = fileInput.files[0];
    alert('图片已缓存，即将自动上传');
    autoUpload();
  };
  fileInput.click();
}

// 第二步：模拟拖拽上传并点击发送
function autoUpload() {
  if (!targetImageFile) return;
  
  // 构造拖拽事件，注入缓存的File对象
  const dropEvent = new DragEvent('drop', {
    bubbles: true,
    cancelable: true,
    dataTransfer: new DataTransfer()
  });
  dropEvent.dataTransfer.items.add(targetImageFile);
  
  // 触发拖拽容器的drop事件
  document.querySelector('#拖拽容器的CSS选择器').dispatchEvent(dropEvent);

  // 等待上传完成后点击发送
  setTimeout(() => {
    document.querySelector('#发送按钮的CSS选择器').click();
  }, 2000);
}

// 页面加载完成后触发手动选择
window.onload = selectFileManually;

• 局限性：首次需要用户手动选择文件，后续可重复自动上传，无法完全无人值守。

核心说明 #

纯前端JavaScript无法直接读取本地文件路径并自动选择，这是浏览器的安全机制，目的是防止恶意脚本窃取本地文件。必须依赖浏览器自动化工具实现完全自动化，或通过用户手动授权实现半自动化流程。

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