js获取所选文件路径

efonfighting

发布于 2019-10-16 15:26:51

14.3K0

发布于 2019-10-16 15:26:51

文章被收录于专栏：一番码客一番码客

前言

本来今天想用vue做一个button，点击后选择本地文件，并获取文件路径，但只在html下实现了，vue下还要研究下。

实现这个小工具的大概的思路就是，获取了文件的路径后，将所选的文件按照顺序存放到一个文本文件中，然后点击另一个按钮之后，调用现有的python程序，这个python程序去读取文件路径文本中的内容，依次合并。

html中实现

代码

这里input里的multiple="multiple"可以控制多选还是单选。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>efonmark</title>
    <script type="text/javascript">
    function openfile() {
        document.getElementById('open').click();
    }

    function showRealPath(filePath){
      document.getElementsByName("textfield")[0].value = filePath;
    }
    </script>
  </head>
  <body>
  <div>
    <input type="button" value="open a file" onclick="openfile()">
    <input type="file" multiple="multiple" name="filename" id="open" style="display:none"/>
  </div>

  <div>
    <input type="file" multiple="multiple" name="uploadfile" onfocus="showRealPath(this.value);"/>
    <input type="hidden" name="uploadfileRealPath">
  </div>
    </body>

</html>