【问题标题】：Return path location for File in Javascript/HTML在 Javascript/HTML 中返回文件的路径位置
【发布时间】：2020-02-16 23:36:49
【问题描述】：

是的，我正在尝试将文件拖放到浏览器中。然后我想获取该文件的路径，并将其分配给我的 JS 代码中的某个变量。

以下是我未能成功的尝试。请给我一些例子来实现这一点。

<body>

<script>
function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    output = [];
    var source = evt.dataTransfer.files();
    for (i=0, f; f=source[i], i++){
        outpush.push(source[i])
    }
    console.log(outpush[0]);
}

window.addEventListener("dragover",function(e){
  e = e || event;
  e.preventDefault();
},false);

window.addEventListener("drop",function(e){
  e = e || event;
  e.preventDefault();
  handleFileSelect(e);
},false);
</script>


</body>
</html>

【问题讨论】：

标签： javascript html file firefox

【解决方案1】：

问题

evt.dataTransfer.files() 不是函数。它应该替换为evt.dataTransfer.items。
你的for循环无效，应该改成
```
for (i=0, f; f=source[i], i++){
    outpush.push(source[i])
}
```
...到...
```
for (i=0; i < evt.dataTransfer.items.length; i++){
    output.push(source[i]);
}
```
- for 循环括号内的部分无效。
- 您正在尝试将文件添加到不存在的outpush。您应该将文件添加到您创建的数组 output。
您无法获取文件的路径，因为 JavaScript 无法访问主机（出于安全原因）。您仍然可以使用source[index].getAsFile() 管理文件。

更正的代码

我提供了jsfiddle。

<html>

<body>

  <script>
    function handleFileSelect(evt) {
      evt.stopPropagation();
      evt.preventDefault();
      output = [];
      var source = evt.dataTransfer.items;
      for (i = 0; i < evt.dataTransfer.items.length; i++) {
        output.push(source[i]);
      }
      console.log(output[0]);
    }

    window.addEventListener("dragover", function(e) {
      e = e || event;
      e.preventDefault();
    }, false);

    window.addEventListener("drop", function(e) {
      e = e || event;
      e.preventDefault();
      handleFileSelect(e);
    }, false);
  </script>


</body>

</html>

【讨论】：