chrome，IE上传图片，js获取图片绝对路径的方法

最新推荐文章于 2023-10-24 00:22:04 发布
最新推荐文章于 2023-10-24 00:22:04 发布
阅读量9.5k 收藏 5
点赞数 1
分类专栏： java编码相关
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huikaichedeyeren/article/details/49798831
版权

chrome浏览器处于安全考虑，不能通过file.value的方法获取上次图片的绝对路径来实现图片预览功能，经多方查找，终于找到的兼容各种浏览器的实现上传图片预览功能的方法，现分享之：


<!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 = "txt/html;charset=utf-8" />
< title >javascript实现IE,firefox客户端图片预览</ title >
< script >
  //使用IE条件注释来判断是否IE6，通过判断userAgent不一定准确
  if (document.all) document.write(' <!--[if lte IE 6]><script type="text/javascript">window.ie6= true<\/script><![endif]--> ');
  // var ie6 = /msie 6/i.test(navigator.userAgent);//不推荐，有些系统的ie6 userAgent会是IE7或者IE8
  function change(picId,fileId) {
   var pic = document.getElementById(picId);
   var file = document.getElementById(fileId);
   if(window.FileReader){//chrome,firefox7+,opera,IE10,IE9，IE9也可以用滤镜来实现
    oFReader = new FileReader();
    oFReader.readAsDataURL(file.files[0]);
    oFReader.onload = function (oFREvent) {pic.src = oFREvent.target.result;}; 
   }
   else if (document.all) {//IE8-
    file.select();
    var reallocalpath = document.selection.createRange().text//IE下获取实际的本地文件路径
    if (window.ie6) pic.src = reallocalpath; //IE6浏览器设置img的src为本地路径可以直接显示图片
    else { //非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现，IE10浏览器不支持滤镜，需要用FileReader来实现，所以注意判断FileReader先
     pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
     pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';//设置img的src为base64编码的透明图片，要不会显示红xx
    }
   }
   else if (file.files) {//firefox6-
    if (file.files.item(0)) {
     url = file.files.item(0).getAsDataURL();
     pic.src = url;
    }
   }
  }
</ script >
</ head >
< body >
< form name = "form1" enctype = "multipart/form-data" >< table >< tr >
< td > 草图1：</ td >
< td >
< input type = "file" name = "file1" id = "file1" onchange = "change('pic1','file1')" >
</ td >
< tr >
< td >草图浏览1：</ td >
< td >
< img src = "images/px.gif" id = "pic1" >
</ td ></ tr >< tr >
< td > 草图2：</ td >
< td >
< input type = "file" name = "file2" id = "file2" onchange = "change('pic2','file2')" >
</ td >
< tr >
< td >草图浏览2：</ td >
< td >
< img src = "images/px.gif" id = "pic2" >
</ td ></ tr >
</ table >
</ form >
</ body >
</ html >

gfwange
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
读取input:file的路径并显示本地图片的方法
09-05
3. **预览图片**：对于支持FileReader API的现代浏览器（如Chrome、Firefox、Safari、Edge等），可以使用`FileReader`对象的`readAsDataURL`方法将文件内容转换为Base64编码的URL，然后设置到`<img>`标签的`src`属性...
使用js获取上传文件的真实路径
u013455166的专栏
02-10 1万+
我们在使用html中的<input type="file">控件上传文件时，有时需要在本页面获取上传文件的路径名称，但是由于现在浏览器出于安全考虑，大多数都无法获得文件的真实路径。如果要在js中解决这个问题，可以区别不同品牌的浏览器，进行不同的操作来获得文件的真实路径，比如谷歌浏览器可以用：window.webkitURL.createObjectURL(File file)来获得，详...
解决文件上传取不到真实路径问题(fakepath)
weixin_34235105的博客
12-31 4802
1、问题描述:前一段时间要做一个excel数据导入到数据库的功能,当时用的是googlechrome,没有用form表单,仅仅一个<inputtype="file"/>组件,上传excel时怎么也去不到文件路径,不论是从哪个驱动器上传,文件路径都是:c:\fakepath\文件名.xls。2、解决方案网上转悠了老半天,没找到一个完美的方案,最后经个同事指导:...
C:\fakepath\文件路径问题
一步之遥的距离是多少
01-20 1475
今天在做导入时，不论是什么路径上传的文件，路径都变成了"C:\fakepath\"+文件名的形式，查询了下，这是ie8下的安全设置问题。   以下就是操作步骤： 工具 -> Internet选项 -> 安全 -> 自定义级别 -> 找到“其他”中的“将本地文件上载至服务器时包含本地目录路径”，选中“启用”即可。 Js代码   //附带不用修改浏览器
js上传图片预览的实现方法
12-11
综上所述，js上传图片预览的方法主要是通过File API或者滤镜技术来实现。对于现代浏览器，我们使用FileReader读取文件内容并设置到`img`标签的`src`属性；对于旧版IE，我们利用滤镜和`document.selection`来显示图片...
ie8本地图片上传预览示例代码
12-03
3. `src`：设置为用户选择的图片路径。 将这个滤镜应用到`div`元素上，就可以在页面上预览用户选择的本地图片，而不会出现浏览器禁止访问本地文件的问题。需要注意的是，这种方法只适用于IE8及以下版本，对于其他...
javascript实现的图片预览和上传功能示例【兼容IE 9】
10-15
- `src`: 必选，要加载的图片路径。 在示例代码中，当用户选择图片后，`previewImg` 函数会被调用。对于非 IE 浏览器，我们使用 `window.URL.createObjectURL` 来获取预览 URL；对于 IE，我们利用 `document....
获取前端界面传入文件绝对路径
henu_student的博客
02-24 9579
文件绝对路径上传到后台 在做这一部分的时候我也费了很长一段时间去查找资料，发现很多的方法都不能直接获取文件的绝对路径。最后发现，大部分浏览器为了安全起见，都设置了拒绝文件绝对路径获取。如果要求用户在应用软件时候还设置浏览器权限的话，体验感会很差。因此，这里写了一些方法，针对部分浏览器应用。 //根据不同浏览器获取路径 function getvl(obj){ //判断浏览器 ...
chrome浏览器上传文件fakepath问题
FightingITPanda的博客
11-04 5717
chrome浏览器接收到上传文件地址 IE浏览器可以获取到真实路径 说是chrome出于安全考虑，搞了个虚拟路径fakepath 我的需求是： 表单上传文件和数据，封装到对象a里传给另一个服务去处理, 现在这个fakepath扔过去就是一个空文件对象，报错 解决： 一顿百度chrome咋拿file真实路径， 其实不用拿路径，拿到也没用，都不在一台服务器上，有路径也取不到文件， 上传的文件spring帮我们生成了一个临时文件 所以，直接从前台传文件对象 form.append("file", docu
Chrome浏览器各种文件的存放路径汇总
分享博主日常学习和使用的一些技术
03-18 5355
2021-03-18首次编辑 Profile文件 什么是Profile文件？ chrome://version可以查看 个人资料路径 书签文件的存贮路径 /Users/username/Library/Application Support/Google/Chrome/Default/Bookmarks 扩展插件存放位置 /Users/username/Library/Application Support/Google/Chrome/Default/Extensions ...
【web前端】相对路径和绝对路径详解
m0_69538833的博客
09-10 3564
绝对路径：绝对：真真地存在你电脑上的实际路径。比如你的window系统的C盘下有个ABC文件夹，ABC文件夹下有个file文件。那么绝对路径：C:\ABC\file。
vue获取上传图片的名字和路径_vue中 iview的upload上传图片 获取本地图片绝对路径 在前端实现图片预览...
weixin_39639653的博客
12-19 1434
在用iview的upload上传图片的时候，想要实现图片的预览。 但是在iview给的例子中，是每上传一个图片触发一次上传事件，调一次接口，后台将图片存入数据库，再回传给前端，这样实现图片在前端的显示。这个方法对于上传多张图片，无疑很不现实。于是就有了下面的方法。想要实现上传多张图片，上传的图依次显示出来，点击提交，实现同时上传，只调一次接口，后台一次性将多张图片存入数据库。在图片上传前 'han...
Vue项目获取本地文件夹绝对路径
热门推荐
GleanWang的博客
12-21 2万+
Vue项目，实现获取本地的绝对文件夹路径的解决方案 一、前端代码 vue项目下的index中代码如下 1、弹框样式代码 <el-dialog title="" :append-to-body="true" :visible.sync="routeDialogVisible" width="600px" :close-on-click-modal="false" > <el-form :model="route
vue+elementUi+el-upload实现上传、获取本机服务器路径、URL、document、createObjectURL、getElementsByClassName
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
05-07 1万+
vue+elementUi+el-upload实现上传、获取本机服务器路径、URL、document、createObjectURL、getElementsByClassName
JavaScript实现获取文件夹内所有文件的绝对路径(附完整源码)
最新发布
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-24 758
JavaScript实现获取文件夹内所有文件的绝对路径(附完整源码)
js获取上传文件的绝对路径
pan-zy的专栏
06-08 1万+
在html中           function upload() {     var filename = document.getElementById("importFile").value;     // 这时的filename不是 importFile 框中的值     alert(filename); } 如上面的代码，用文件上传对话框选择文件后，如果
js获取input file绝对路径的方法
06-06
在JavaScript中，获取input file的绝对路径有一个限制，在现代浏览器中，JavaScript无法直接访问文件系统。所以，我们不能使用JavaScript在前端直接获取文件的绝对路径。 但是，我们可以通过一些方法获得文件名。input file元素有一个value属性，这个属性的值就是用户选择文件的文件名（包含文件路径）。不过，在一些浏览器中（如chrome），这个属性的值只包含文件名而已。但是在Firefox和Internet Explorer的某些版本中，这个属性包括整个文件路径。 使用方法： 首先，我们需要一个input元素，设置type="file"，用于选择文件。然后，我们可以使用JavaScript获取这个元素的value属性的值，这个值就是文件名。 如果需要获取该文件的绝对路径，我们可以为input元素添加change事件，当文件路径发生变化时，触发该事件，然后获取文件名，再通过对文件名的处理，可以得到绝对路径。 示例代码： HTML部分： <input type="file" id="file" onchange="getFilePath(this)"> JavaScript部分： function getFilePath(input){ var filePath = input.value; var fileName = filePath.split("\\").pop(); alert(filePath); } 上述代码中，我们使用了JavaScript的split和pop方法来将文件名从文件路径中提取出来，通过这样修改，我们获得了选择文件的绝对路径。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值