如何在Yii2中通过‘伪’上传表单仅获取本地文件路径而非上传文件

嘿，这个需求真的很贴合实际场景！让员工直接选文件代替手动输入路径，确实能把输入错误的概率降到最低。我给你梳理几个可行的实现方案，不管是普通网页还是桌面应用都能搞定：

一、前端处理：阻止上传，提取文件路径 #

首先要明确：现代浏览器出于安全限制，普通网页环境下没法直接拿到完整的本地绝对路径（会显示类似C:\fakepath\文件名的伪装路径），但如果是内网环境用旧版浏览器，或者你开发的是桌面应用（比如Electron），就能拿到真实路径。

方案1：普通网页场景（适配浏览器安全限制） #

我们可以用文件选择框获取路径，去掉浏览器添加的fakepath前缀，再把路径传给后端：

<form id="pathSubmitForm">
  <input type="file" id="fileSelector" name="selectedFile">
  <button type="submit">提交文件路径</button>
</form>

<script>
document.getElementById('pathSubmitForm').addEventListener('submit', function(e) {
  // 阻止表单默认的文件上传行为
  e.preventDefault();
  
  const fileInput = document.getElementById('fileSelector');
  if (!fileInput.files.length) {
    alert('请先选择一个文件哦');
    return;
  }
  
  // 提取路径并处理浏览器的fakepath前缀
  let filePath = fileInput.value;
  filePath = filePath.replace(/C:\\fakepath\\/i, '');
  
  // 把路径发送到后端接口
  fetch('/api/save-file-path', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ filePath: filePath })
  })
  .then(res => res.json())
  .then(data => {
    if (data.success) {
      alert('路径已成功保存！');
      fileInput.value = ''; // 清空选择框
    } else {
      alert('保存失败，请重试');
    }
  })
  .catch(err => {
    console.error('请求出错:', err);
    alert('网络异常，请稍后再试');
  });
});
</script>

方案2：Electron桌面应用（获取真实绝对路径） #

如果你的项目是桌面端应用，Electron可以直接拿到文件的真实本地路径，完全没有浏览器的限制：

const { ipcRenderer } = require('electron');

document.getElementById('fileSelector').addEventListener('change', function(e) {
  const selectedFile = e.target.files[0];
  // 直接获取真实的本地绝对路径
  const realFilePath = selectedFile.path;
  
  // 发送路径到后端或主进程处理
  fetch('/api/save-file-path', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ filePath: realFilePath })
  });
});

二、后端处理：接收路径，存入数据库 #

后端的逻辑非常简单——不需要处理任何文件上传的逻辑，只需要接收前端传来的路径字符串，插入到数据库即可。这里以Node.js/Express为例，其他语言（Java、PHP、Python等）逻辑完全一致：

const express = require('express');
const app = express();
const mysql = require('mysql'); // 替换成你项目用的数据库驱动

// 解析JSON格式的请求体
app.use(express.json());

// 配置数据库连接
const dbConnection = mysql.createConnection({
  host: 'localhost',
  user: 'your_db_username',
  password: 'your_db_password',
  database: 'your_database_name'
});

dbConnection.connect(err => {
  if (err) throw err;
  console.log('已连接到数据库');
});

// 保存路径的接口
app.post('/api/save-file-path', (req, res) => {
  const { filePath } = req.body;
  
  if (!filePath) {
    return res.status(400).json({ success: false, message: '文件路径不能为空' });
  }
  
  // 插入数据库的SQL语句
  const insertSql = 'INSERT INTO employee_file_paths (file_path, create_time) VALUES (?, NOW())';
  dbConnection.query(insertSql, [filePath], (err, result) => {
    if (err) {
      console.error('数据库插入失败:', err);
      return res.status(500).json({ success: false, message: '保存失败' });
    }
    res.json({ success: true, message: '路径保存成功' });
  });
});

app.listen(3000, () => {
  console.log('后端服务运行在 http://localhost:3000');
});

额外提示 #

• 如果你的项目必须用传统表单提交（而非AJAX/fetch），可以在文件选择框的change事件中，把路径赋值给一个隐藏的<input type="hidden">，然后提交这个隐藏输入框的值，同样不需要处理文件上传。
• 记得在后端做路径的合法性校验（比如是否符合格式、是否包含非法字符），避免恶意数据存入数据库。

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