在angularjs中查找文件路径答案

【问题标题】：Find File path in angularjs在angularjs中查找文件路径
【发布时间】：2017-10-14 11:50:06
【问题描述】：

我在 angularJS 中有一个函数，我需要在上传时获取文件的路径。这是代码

$scope.uploadFile = function (element) {
    $scope.filetemplate = false;
    $scope.spinround2 = true;
    var filename = event.target.files[0].name;
    var filepath = event.target.value;
    }

问题是即使我尝试从任何驱动器检索文件，我也将文件路径设为 c:/fakepath。有人可以为此提供解决方案吗？

【问题讨论】：

您要上传文件吗？
是的，我正在尝试从 C 盘上传文件。即使我尝试了不同的驱动器。
检查this 答案和this 以显示
出于明显的安全原因，浏览器不会暴露本地文件路径
有没有办法找到上传文件的路径？

标签： angularjs html

【解决方案1】：

出于明显的安全原因，浏览器不会公开本地文件路径。

来自 HTML5 文档：

由于历史原因，valueIDL 属性以字符串"C:\fakepath\" 作为文件名的前缀。一些旧版用户代理实际上包含完整路径（这是一个安全漏洞）。因此，以向后兼容的方式从value IDL 属性中获取文件名并非易事。以下函数以适当兼容的方式提取文件名：
function extractFilename(path) {
  if (path.substr(0, 12) == "C:\\fakepath\\")
    return path.substr(12); // modern browser
  var x;
  x = path.lastIndexOf('/');
  if (x >= 0) // Unix-based path
    return path.substr(x+1);
  x = path.lastIndexOf('\\');
  if (x >= 0) // Windows-based path
    return path.substr(x+1);
  return path; // just the file name
}
可以这样使用：
<p><input type=file name=image onchange="updateFilename(this.value)"></p>
<p>The name of the file you picked is: <span id="filename">(none)</span></p>
<script>
 function updateFilename(path) {
   var name = extractFilename(path);
   document.getElementById('filename').textContent = name;
 }
</script>
— HTML Living Standard - The definition of <input type="file">

【讨论】：