js获取本地图片路径代码

最新推荐文章于 2024-07-25 23:05:14 发布
最新推荐文章于 2024-07-25 23:05:14 发布
阅读量4.5k 收藏 2
点赞数
分类专栏： ruby js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yc1022/article/details/15500167
版权
这篇博客介绍了一种使用JavaScript获取本地文件输入框中图片文件全路径的方法，适用于IE和Firefox浏览器。通过创建FileReader对象读取图片数据，并在onloadend事件中将图片数据设置为<img>标签的src，实现图片预览。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>get file input full path</title>
  <script language='javascript'>
      function getFullPath(obj)
      {
          if(obj)
          {
//ie
              if (window.navigator.userAgent.indexOf("MSIE")>=1)
              {
                  obj.select();
                  return document.selection.createRange().text;
              }
//firefox
              else if(window.navigator.userAgent.indexOf("Firefox")>=1)
              {
                  if(obj.files)
                  {
                      return obj.files.item(0).getAsDataURL();
                  }
最低0.47元/天 解锁文章
yanchengyc
关注
专栏目录
通过JS获取用户本地图片路径并显示的代码
10-28
通过JS获取用户本地图片路径并显示的代码，多用于本地上传图片的预览效果
JS下载图片地址跟图片名
qq_43787947的博客
05-06 302
【代码】JS下载图片地址跟图片名。
js img读取本地图片
热门推荐
qq1014156094的博客
04-13 2万+
function imgPreview(fileDom) { //判断是否支持FileReader if(window.FileReader) { var reader = new FileReader(); } else { alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！"); } //获取文件 var file = fileDom.files[0]; v
Html读取本地文件夹下文件
丿灬安之若死
09-08 2634
<!DOCTYPE html> <html> <head> <title>ReadImage</title> <script type="text/javascript" src="./jquery.js"></script> </head> <body> <input typ...
【js文件路径】
qq_43298353的博客
04-27 515
2.相对路径（相对于html文件的位置）
JS获取input file绝对路径的方法(推荐)
10-21
总体来说，文章介绍了通过JavaScript获取文件路径的方法，并详细说明了在不同浏览器之间进行兼容性处理的必要性。此外，还涉及到了浏览器安全策略对代码实现的影响，以及如何在必要时通过用户手动配置来绕过这些安全...
读取input:file的路径并显示本地图片的方法
09-05
显示本地图片的基本步骤如下： 1. **获取文件**：当用户通过`<input type="file">`选择文件后，可以通过JavaScript的`HTMLInputElement.files`属性访问到这个文件对象。 2. **验证文件类型**：在读取文件之前，...
JS图片上传裁剪获取地址代码
06-24
在这个示例中，File API被用来让用户选择本地图片，并在不离开页面的情况下预览和操作。 1. **文件选择**：在HTML5中，我们可以使用`<input type="file">`元素来让用户选择文件。通过监听`change`事件，当用户选择...
js获取本地图片路径
代码的专栏
01-16 3654
function getPath(obj){      if (obj) {          if (navigator.userAgent.indexOf("MSIE")>0) {              obj.select();              // IE下取得图片的本地路径              return document.selection.createR
JS获取本地文件绝对路径-预览本地图片
吴钦飞
08-06 1万+
在网上找了很久，一直只有IE和Firefox的，没有谷歌的
如何通过JS获取用户本地图片路径
weixin_33991727的博客
02-16 491
直接上代码 记录一下 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> ...
【JavaScript & jQuery】 获取图片、文件 地址的几种方法
freedomVenly的博客
06-22 2605
备忘， 整理一下： chrome、IE、火狐测试过有效； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <label> ...
python-docx 如何将列表中的值提取到段落中的run以及保存为多个文档？
**My Coding Family**
07-25 1056
🏆本文收录于《CSDN问答解惑-专业版》专栏，主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由🚀；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！
js下载图片
元元猿的博客
10-31 1565
HTML5新增 标签的download属性， 标签添加download属性后，点击a链接就可以下载href属性写的路径文件；download属性：（可选）指定下载文件的文件名；若不指定文件名则下载到本地的文件名和href属性写的文件名一样。利用a链接的download属性，通过点击a链接下载图片。设置 标签的 download 属性。设置 标签的 href 属性。通过js下载图片方法的完整代码及详解。1、通过点击a链接下载图片/文件。1、通过点击a链接下载图片/文件。
js 获取选中file图片路径并显示的两种方法
qq_40138785的博客
11-17 1万+
方法一： &lt;input type="file" id="FileTypeIcon"&gt; &lt;img src="" class="img" /&gt; $("#FileTypeIcon").live('change', function () { var file = this.files[0];//获取文件信息
js加载图片获取宽高 绝对路径和相对路径
CAPEVERDE77的博客
02-06 754
- 第一种 // 创建对象 const img = new Image(); // 改变图片的src img.src = url; // 加载完成执行 img.onload = function () { // 打印 console.log(img.width,img.height); }; -----------...
js获取上传文件的绝对路径
pan-zy的专栏
06-08 1万+
在html中           function upload() {     var filename = document.getElementById("importFile").value;     // 这时的filename不是 importFile 框中的值     alert(filename); } 如上面的代码，用文件上传对话框选择文件后，如果
js进行图片本地预览&&生成本地图片地址
web_wp的博客
12-05 600
【代码】js进行图片本地预览&&生成本地图片地址。
【在JS中如何获取图片路径以及更改图片】
Lnbd_的博客
03-22 4205
在JS中如何获取图片路径以及更改图片
uniapp 原生api获取本地文件路径
最新发布
09-30
UniApp是一个跨平台的框架，它允许开发者编写一套代码同时构建iOS、Android以及Web应用。在UniApp中，获取本地文件路径通常通过调用原生API来实现，因为这涉及到操作系统的文件系统权限。 在UniApp中，你可以使用`uni.getStorageSync`或`uni.saveFileToStorage`这两个方法来处理本地文件。如果你需要获取某个已存在文件的路径，可以先读取到缓存(`uni.getStorageSync`)，然后获得返回的文件路径： ```javascript uni.login({ success: function (res) { if (res.code === 'getSetting:success') { // 获取到用户授权后，假设你想获取图片库中的照片 uni.showActionSheet({ itemList: ['选择图片'], success: function (res) { if (res.tapIndex === 0) { uni.chooseImage({ count: 1, // 可选，默认9 sizeType: ['original', 'compressed'], // 可选，默认['original'] sourceType: ['album', 'camera'], // 可选， 默认['album'] success: function (res) { let filePath = res.tempFilePaths[0]; // 返回的是临时文件路径 // 使用uni.getStorageSync将临时路径保存到本地，获取完整路径 uni.getStorageSync(filePath, { key: 'fileKey', success: function (localPath) { console.log('本地文件路径:', localPath); } }); } }); } } }); } }}) ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值