如何用纯JavaScript/Angular2获取选中文件的真实路径？

别纠结获取真实的本地文件路径啦——这其实是浏览器的安全保护机制故意做的！为了防止网页随意读取用户本地文件系统的隐私信息，所有现代浏览器都会把真实路径替换成C:\fakepath\这类伪装路径，而且这个限制是没法绕过的（也不应该绕过，毕竟安全第一）。

不过你要把文件传到C# Web API的需求完全不用依赖真实路径，直接用浏览器提供的File对象就能完成上传，下面是具体的实现步骤：

调整后的HTML #

你的input标签只需稍作优化，添加文件类型过滤提升用户体验：

<input type="file" id="selectedFile" accept=".xls,.xlsx" class="button-pop-up-footer1">

accept=".xls,.xlsx"会让文件选择器默认只显示Excel文件，避免用户选错类型。

正确的JavaScript上传逻辑 #

不用再去拿value属性，直接获取input的files对象，用FormData包装后发送给API即可：

// 给文件选择框绑定change事件
document.getElementById("selectedFile").addEventListener("change", function(e) {
  // 获取选中的第一个文件（如果允许多选可以遍历files数组）
  const targetFile = e.target.files[0];
  if (!targetFile) return;

  // 创建FormData对象，用来包装文件数据
  const formData = new FormData();
  // 把文件添加进去，这里的"excelFile"要和Web API控制器的参数名完全对应
  formData.append("excelFile", targetFile);

  // 用fetch发送POST请求到你的API
  fetch("https://your-api-url/upload-excel", {
    method: "POST",
    body: formData
    // 不用手动设置Content-Type，浏览器会自动添加正确的multipart/form-data请求头
  })
  .then(response => {
    if (response.ok) {
      console.log("Excel文件上传成功！");
      // 这里可以添加上传成功后的UI提示或后续逻辑
    } else {
      console.error("文件上传失败，请重试");
    }
  })
  .catch(error => {
    console.error("请求出错:", error);
  });
});

对应的C# Web API控制器方法示例 #

控制器这边要接收IFormFile类型的参数，注意参数名要和前端append时的名称一致：

[ApiController]
[Route("api/[controller]")]
public class FileUploadController : ControllerBase
{
    [HttpPost("upload-excel")]
    public async Task<IActionResult> UploadExcel(IFormFile excelFile)
    {
        // 校验文件是否存在
        if (excelFile == null || excelFile.Length == 0)
        {
            return BadRequest("请选择要上传的Excel文件");
        }

        // 示例：将文件保存到服务器的Uploads目录
        var uploadDir = Path.Combine(Directory.GetCurrentDirectory(), "Uploads");
        if (!Directory.Exists(uploadDir))
        {
            Directory.CreateDirectory(uploadDir);
        }

        var savePath = Path.Combine(uploadDir, excelFile.FileName);
        using (var stream = new FileStream(savePath, FileMode.Create))
        {
            await excelFile.CopyToAsync(stream);
        }

        return Ok(new { Message = "文件上传成功", FileName = excelFile.FileName });
    }
}

这种方式完全符合浏览器安全规范，不需要绕开任何限制，也是文件上传的标准做法——网页本来就不需要知道用户的本地文件路径，只要能拿到文件内容并上传就足够啦。

内容的提问来源于stack exchange，提问作者Željko Krnjić