专栏首页一番码客js获取所选文件路径

js获取所选文件路径

前言

本来今天想用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>

实际效果

本文分享自微信公众号 - 一番码客(efonfighting),作者:Efonfighting

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端基础-CSS基础(五)

    efonfighting
  • JavaScript DOM之元素查找与CSS样式设置

    efonfighting
  • electron开发pdf合并工具(一)

    前面我们已经对electron即相关的electron-vue、element-ui等做了一定的了解。

    efonfighting
  • 使用DOM Breakpoints找到修改属性的Javascript代码

    使用Chrome开发者工具的DOM断点功能可以让您快速找到修改了某一个DOM元素的Javascript代码。

    Jerry Wang
  • 基于 Go 语言开发在线论坛(三):访问论坛首页

    前面两篇教程学院君分别给大家介绍了基于 Go 语言构建在线论坛的整体设计以及数据表的创建、模型类的编写,今天我们来看看如何在服务端处理用户请求。

    学院君
  • 36.Swift学习之Associated Object

    Swift 可以利用 OC 的 runtime 和 KVC ,在运行时向一个对象添加值存储,这种方式称之为Associated Object。在使用 exten...

    YungFan
  • vue 渲染HTML代码 后台返回HTML代码

    实现:<span v-html='html'></span> 使用 v-html 赋值就可以了

    onety码生
  • 携手应用宝 腾讯WeTest开发者扶持计划云豹升级

    6月2日,腾讯WeTest参加应用宝在深圳主办的应用宝游戏合作伙伴沙龙,腾讯互娱研发部游戏质量总监方亮现场宣布WeTest和应用宝联合推出开发者扶持计划全面升级...

    WeTest质量开放平台团队
  • 基于Socket的网络聊天室编程(第一版)

    一:什么是套接字 在网络编程中最常用的方案便是Client/Server (客户机/服务器)模型。在这种方案中客户应用程序向服务器程序请求服务。一个服务程序通常...

    用户1161731
  • Python3 url解码与参数解析

    py3study

扫码关注云+社区

领取腾讯云代金券