原生js 选择文件,获取 input type=file 时候的文件路径

2023-11-15

使用 URL.createObjectURL() 方法来获取文件的路径。

<div>
      <input type="file" onchange="handleFileSelect(event)" />
 </div>
        <script type="text/javascript">
            function handleFileSelect(event) {
                const file = event.target.files[0].value; 
                //这就是文件路径
                const filePath = URL.createObjectURL(file);}
        </script>
选择文件 获取路径

在Web浏览器中,由于安全原因,在本地文件系统中获取文件的真实路径是不可行的。浏览器只会提供临时的虚拟路径,这是出于安全考虑的一种方式。

如果你需要使用文件路径进行本地文件操作,可以考虑使用 Node.js 等后端技术,这些技术提供了用于访问本地文件系统的 API 和方法。如果在Web中进行文件操作,一般建议使用文件上传组件、AJAX上传、表单上传等方式,而不是直接使用文件路径进行操作

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

原生js 选择文件,获取 input type=file 时候的文件路径 的相关文章

  • Dimple.js - 将数据标签添加到条形图的每个条形

    我使用的是dimple js 它基于d3 js 是否可以向本示例中提到的条形图的每个条形添加数据标签http dimplejs org examples viewer html id bars vertical http dimplejs
  • 对自定义打字稿错误实例实施instanceof检查?

    打字稿有这个instanceof 检查自定义错误 https github com Microsoft TypeScript issues 13965问题 但尚不清楚我们需要做什么才能得到instanceof在职的 例如对于这个异常我们如何
  • 通过 HTML5 文件和 URL API 正确创建和提供 PDF Blob

    好吧 假设我有文档数据存储在某处 让我们任意取this pdf http www grida no climate ipcc tar wg1 pdf tar 01 pdf 问题 1 我想要做的是对此 URL 进行 AJAX 调用 因为我需要
  • React延迟加载/无限滚动解决方案

    我花了一段时间才弄清楚如何使用优秀的延迟加载图像React Lazyload 组件 https github com jasonslyvia react lazyload 演示在滚动时延迟加载图像 但在测试时我无法获得相同的行为 罪魁祸首是
  • 捕获外部脚本文件中的 javascript 错误

    我有一点 JavaScript Jquery 工具的叠加层 http flowplayer org tools overlay index html 当放到错误使用它的页面上时可能会引发异常 我正在尝试优雅地处理它 我有一个通用的 wind
  • 代码点火器 JSON

    你好 我使用 codeigniter 然后我从控制器中的数据库中回显输出 然后在我的视图文件中执行以下操作 但它没有显示任何内容 S 我的模型文件 function forumList this gt db gt select oversk
  • JSDoc:如何在生成的文档中包含自定义 css 文件模板?

    JS文档docs https jsdoc app about configuring default template html say 将图像目录复制到输出目录 复制全部 将 myproject static 中的静态文件复制到输出目录
  • WebDriver:更改事件未触发

    我有一个使用 KnockoutJS 的应用程序 我正在尝试编写一些测试表单的测试 如果您不了解 KnockoutJS 简单来说 它提供了从我的视图到我的数据模型的绑定 这意味着当我在输入字段中键入值时 我的基础对象会自动使用该输入字段值进行
  • 使用 easyXDM 调整 IFrame 大小

    我将 iFrame 代码提供给客户 以便他们可以显示我网站上的动态内容 我希望其页面上的 iFrame 能够调整大小以适合我的内容 我按照 easyXDM 网站的说明进行操作 但也许我遗漏了一些东西 我没有收到任何错误 但 iFrame 保
  • 如何向尚未添加到页面的元素注册 Javascript 事件处理程序

    我正在尝试构建一个greasemonkey 脚本 它将根据用户与其他动态创建的数据表的交互动态创建数据表 我的问题是 每次创建表时 我都必须进行两次传递 一次用于创建表 另一次用于获取表中我想要添加事件处理程序的所有对象 通过 id 并添加
  • 带有嵌入式 Ruby 的 Javascript:如何安全地将 ruby​​ 值分配给 javascript 变量

    我在页面的 javascript 块中有这一行 res foo 处理这种情况的最佳方法是什么 ruby var里面有单引号吗 否则会破坏 JavaScript 代码 我想我会用红宝石JSON http json org ruby var 上
  • Angular-Datatables + Angular-xeditable:取消可编辑行

    当组合 Angular DataTables 和 Angular XEditable 时 添加新行时会取消可编辑行 这是jsfiddle https jsfiddle net faj61h5d 10 示例操作如下 1 这是初始状态 2 将第
  • 页面点击其他路径后 $timeout 继续运行

    我在用yo angular fullstack生成器来构建我的网站 当用户注册该网站时 它将发送一封带有链接的激活电子邮件 当用户点击该链接时 会显示激活成功并超时进入主页 但是 当超时未结束 用户点击页面中的任何其他链接时 会跳转到其他页
  • Rails 4 - 带有 dependent-fields-rails 的条件 JS

    我正在尝试弄清楚如何在我的 Rails 4 应用程序中使用 dependent fields rails gem 我迷路了 我已将 underscore js 包含在我的供应商 javascripts 文件夹中 并更新了我的 applica
  • 对数字和字母元素的数组进行排序(自然排序)

    假设我有一个数组 var arr 1 5 ahsldk 10 55 3 2 7 8 1 2 75 abc huds 我尝试对其进行排序 我得到了类似的东西 1 1 10 2 2 3 5 55 7 75 8 abc ahsldk huds 注
  • 如何检查jquery数据表中的每个复选框?

    我有一个第一列带有复选框的表格 我使用 jQuery DataTable 插件显示我的表格 我制作了 2 个链接来选择 取消选择每个复选框 这是选择全部的一个 a href Select all a 和 JavaScript functio
  • 比较 javascript 元素和 scala 变量的 Play 框架 Twirl 模板

    如下面的代码示例所示 我想比较 scala 辅助元素内的 javascript 元素 然而 即使存在元素 abcde 它也始终返回 false 除了使用标签之外 如何获取 scala 辅助元素内的 javascript 值 appSeq S
  • Tween JS 基础知识之三个 JS 立方体

    我是 Tween JS 的新手 尝试使用 Tween 制作一个向右移动的简单动画 下面是我在 init 函数中的代码 我使用的是三个 JS var geometry new THREE CylinderGeometry 200 200 20
  • 如何在 ChartJS 中创建自定义图例

    我需要使用 ChartJS 库为我的圆环图创建自定义图例 我已经使用 ChartJS 提供的默认图例创建了甜甜圈 但我需要一些修改 我希望其价值高于汽车名称 另外 我不喜欢粘性图例 我想将其与甜甜圈分开 这样我就可以更改字体 框的样式 例如
  • 地址更改时如何停止 Angular 重新加载

    我正在使用 Angular 的scrollTo and anchorScroll像这样 app controller TestCtrl function scope location anchorScroll scope scrollTo

随机推荐

  • 第十章 内部类(上)

    第十章 内部类 上 可以将一个类的定义放在另一个类的定义内部 这就是内部类 内部类是一种非常有用的特性 因为它允许你把一些逻辑相关的类组织在一起 并控制位于内部的类的可视性 然而必须要了解 内部类与组合是完全不同的概念 这一点很重要 在最初
  • QT信号连接信号

    有时候代码可能复杂 我们需要一个信号连接另一个信号 比如例子中的下课不是直接运行时触发的 而是点击下课按钮 include mainwindow h include ui mainwindow h include QPushbutton h
  • linux bmc管理(工作笔记,随时更新)

    ipmi使用 概述 1 修改bmc IP地址 2 修改bmc 用户信息 概述 在日常工作中 对机器bmc配置一般是连接显示器进行相应配置 通过ipmi进行bmc的配置可以实现在系统下进行bmc的配置 从而实现对多台服务器进行bmc的配置 大
  • 记一次umi开发后台管理系统的基础使用

    先介绍一个umi 阿里开源的一个企业级可插拔的react脚手架 umi相对比react官方推荐的脚手架更加的简单 更贴近vue cli的使用感受 而本文仅仅介绍基础使用方法 高手请绕行 开发展示 仿叮咚买菜后台管理系统预览 http din
  • 抖音短视频矩阵号系统开发者开源部署分享(一)

    抖音是一款备受欢迎的短视频APP 拥有数亿的用户 其中包括了大量的粉丝 为了让更多的人能够发现和观看到你的视频 抖音SEO是必不可少的一环 特别是对于拥有企业或个人品牌的用户来说 在这个过程中 抖音SEO源码的开源部署显得尤为重要 首先 我
  • 2022年11月计划(cesium for ue源码抄写+ socket视频学习+ue4 tf视频学习)

    根据规划 进行cesium for ue源码抄写 网络视频教程 ue4 tf1视频学习
  • VSCode SFTP 文件同步配置中监听文件删除或新增包含子目录的文件 watcher配置

    name aaaaa host 321312321 protocol sftp port 22 username 123321 password 123321 remotePath www wwwroot web uploadOnSave
  • 关于Geany编写python中文注释时报错的解决办法

    关于Geany编写python中文注释时报错的解决办法 其实这个方法很简单 首先打开Geany 新建或者打开一python文件 然后在 文档 中选择 设置文件编码 的 Unicode 里面的 UTF 8 就好了 注意 这种方只能在你所正在编
  • EXCEL 怎么用函数公式计数(Excel函数去重计数 / 去除重复项),不使用透视表

    起因 因领导层需要将电商平台利润核算自动化 原始数据不可以动 所以需要用到公式 PS 其实所谓自动化不是Python VBA办公自动化 就是嵌套一堆公式 然后每月更新电商后台基础数据 就可以出来利润结果 正文 普通方法1 直接使用 SUM
  • RHEL6 系统启动故障排错

    RHEL6 系统排错 系统故障了 机器无法正常工作 更别提正常提供服务 这个时候如果我们掌握了系统排错 那就大有用武之地了 我们在学习和实验阶段 可以通过系统排错帮助大家更深入了解系统启动过程 对系统进行如下破坏 1 破坏grub引导 dd
  • Docker 安装部署与基础操作

    Docker 是一个开源的商业产品 有两个版本 社区版 Community Edition 缩写为 CE 和企业版 Enterprise Edition 缩写为 EE 企业版包含了一些收费服务 个人开发者一般用不到 下面的介绍都针对社区版
  • SQL优化 之 百万数据真实案例教程0基础(小白必看)

    前提准备 本案例准备了100W的数据进行SQL性能测试 数据库采用的是MySQL 总共介绍了常见的14种SQL优化方式 每一种优化方式都进行了实打实的测试 逐行讲解 通俗易懂 一 前提准备 提前准备一张学生表数据和一张特殊学生表数据 用于后
  • LTE频段(band)划分

    1 TDD LTE 国内使用的TDD包括B38 B39 B40 B41 其中B38是B41的子集 国内运营商频段划分如下 其中移动B40 联通电信B41频段为室内补充频段 联通电信定制机均不支持B40频段 基本可以解读为该频段目前被联通电信
  • Java概述

    Java 简介 一个苦逼的建筑专业的Java小白 什么是 Java Java 是一门面向对象编程语言 不仅吸收了 C 语言的各种优点 还摒弃了 C 里难以理解的多继承 指针等概念 因此 Java 语言具有功能强大和简单易用两个特征 Java
  • Hive【Hive(一)DDL】

    前置准备 需要启动 Hadoop 集群 因为我们 Hive 是在 Hadoop 集群之上运行的 从DataGrip 或者其他外部终端连接 Hive 需要先打开 Hive 的 metastore 进程和 hiveserver2 进程 meta
  • 深度之眼Paper带读笔记NLP.10:DCNN

    文章目录 前言 第一课 论文导读 句子建模简介 词表征Word Representation 基于分布式相似性的表征Distributional Similarity based representations 基于窗口的共现矩阵Windo
  • 《汽车行业面向智能制造的BOM物料管理》拆书心得—第三章 企业级BOM架构探讨

    各企业对各种BOM形态叫法不一 为后续探讨方便 首先从业界较流行的叫法来定义各BOM形态 明确各形态BOM的内涵 服务对象及作用 这些BOM形态包括早期BOM Early BOM 工程BOM Engineering BOM EBOM CAD
  • 接口测试工具Apifox 基础篇:公共脚本

    一 公共脚本的使用背景 1 实现脚本复用 避免多处重复编写相同功能的脚本 2 相同功能的脚本或通用类 方法可放到公共脚本中供接口直接引用 二 使用方式 1 管理公共脚本 打开 项目设置 gt 公共脚本 在这里管理公共脚本 2 引用公共脚本
  • npm 升级

    更新到最新版本 npm install g npm 更新到指定版本 npm g install npm 8 0 0 清理 npm 缓存数据 npm cache clean force
  • 原生js 选择文件,获取 input type=file 时候的文件路径

    使用 URL createObjectURL 方法来获取文件的路径 div div