-
2021-06-14 07:04:12
自己倒腾了半天,终于解决了,并在chrome浏览器上验证可行,方法如下:
function getImgURL(node) {
var imgURL = "";
try{
var file = null;
if(node.files && node.files[0] ){
file = node.files[0];
}else if(node.files && node.files.item(0)) {
file = node.files.item(0);
}
//Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径
try{
//Firefox7.0
imgURL = file.getAsDataURL();
//alert("//Firefox7.0"+imgRUL);
}catch(e){
//Firefox8.0以上
imgURL = window.URL.createObjectURL(file);
//alert("//Firefox8.0以上"+imgRUL);
}
}catch(e){ //这里不知道怎么处理了,如果是遨游的话会报这个异常
//支持html5的浏览器,比如高版本的firefox、chrome、ie10
if (node.files && node.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
imgURL = e.target.result;
};
reader.readAsDataURL(node.files[0]);
}
}
return imgURL;
}
注意在传递node的时候要传递document.getElementById 获取的节点,不要用jquery的方式去获取节点
更多相关内容 -
解决fakepath的js
2013-07-23 15:06:13自己项目中遇到上传时fakepath的问题,通过这个js解决 -
解决本地文件上传时fakepath的问题
2019-08-20 18:28:52解决本地文件上传时fakepath的问题 直接上例子 这个例子是用jqery操作的事件,注意引入jquery HTML代码 <div class="demo"><img width="200px"> <input type="file"/> </div> ...解决本地文件上传时fakepath的问题
直接上例子
这个例子是用jqery操作的事件,注意引入jquery
- HTML代码
<div class="demo"><img width="200px"> <input type="file"/> </div>
- JavaScript代码
$("input[type='file']").on('change', function () { var myFReader = new FileReader(); var file = document.getElementById('input-file').files[0]; myFReader.readAsDataURL(file); myFReader.onloadend = function(evc){ var src = evc.target.result; $('img').attr('src',src); alert(src); } });
-
获取input添加图片的路径以及fakepath的解决方法
2020-01-17 10:37:24错误实例(fakepath路径) <html> <input type="file" id="recipient-name"> <script> var file = $("#recipient-name"); //获取id值为...的file类型的表单 $(file).change(functi...错误实例(fakepath路径)
<html> <input type="file" id="recipient-name"> <script> var file = $("#recipient-name"); //获取id值为...的file类型的表单 $(file).change(function() { //表单的内容完成后实现的方法 var fileToncet = $(this).val(); //获取表单的内容 console.log(fileToncet); //输出表单的内容 <img src="C:\fakepath\3.3.jpg"/> var creatImg = '<img src="' + fileToncet + '"/>'; //生成一个图片标签,路径和为表单的内容(即路径) var imgDiv = $('.div-img').append(creatImg); //将这个图片标签插入到指定位置,照片不显示 console.log(creatImg);//输出图片的路径 <img src="C:\fakepath\3.3.jpg"/> 浏览器为了安全问题,会自动更改图片的路径,所以此时图片的路径不是原路径,导致图片显示不出来
解决方法
<html> <input type="file" id="recipient-name"> <script> $("#recipient-name").change(function(e) { //监听input内容改变 var exSrc = e.target; exGetImg(exSrc); //调用获取图片信息的方法 }) var exGetImg = function(extag) { var file = extag.files[0]; //选中文件的第一个文件(当成固定的格式) var readers = new FileReader(); //新建文件阅读对象,来转意路径 readers.readAsDataURL(file); //将读取的文件路径,将路径转换为url类型 readers.onload = function() { //转换之后调用onload()方法 var imgsSrc = this.result; //图片地址读出来之后result结果为 DataURL //this.result 为图片转化的url路径 console.log(imgsSrc) //显示出来图片的url路径,可以直接赋给img的src属性 var creatImg = '<img src="' + imgsSrc + '"/>'; //生成一个图片标签,路径和为表单的内容(即路径) var imgDiv = $('.div-img').append(creatImg); //将这个图片标签插入到指定位置,照片显示。 } }
-
IE8上传文件时获取文件本地路径问题(C:\fakepath\……)的解决
2021-06-14 07:05:19不管怎么选文件,打出的结果都为:C:\fakepath\…… ----------------------------------------------------------------------------------------------------------------- 使用IE8时,没想到一个网站里面的上传...iqzjzlugkowveqsuxequoeux
先看一下Jsp代码:
---------------------------------------------------------------------------------------------------------------
附件上传:-----------------------------------------------------------------------------------------------------------------
var myFile =$("#myFile").val();
alert(myFile );
不管怎么选文件,打出的结果都为:C:\fakepath\……
-----------------------------------------------------------------------------------------------------------------
使用IE8时,没想到一个网站里面的上传图片时用JavaScript预览本地图片的功能失效了,图片总是显示错误,用alert()看了下图片的路径居然变成了C:\fakepath\*.jpg,真实的路径被C:\fakepath\取代了。经过研究,原来是因为IE8增加了安全选项,,默认情况下不显示上传文件的真实路径,进入internet选项,修改下设置即可显示真实的文件路径。
以下就是操作步骤:
工具 -> Internet选项 -> 安全 -> 自定义级别 -> 找到“其他”中的“将本地文件上载至服务器时包含本地目录路径”,选中“启用”即可,如图:
版权声明:本文为博主原创文章,未经博主允许不得转载。
-
文件上传的fakepath问题
2018-12-03 17:35:00fakepath就是现代浏览器为了隐藏了文件实际路径而生成的字符串。接下来就是寻找解决方法找出图片原路径的方法,接下来的代码是网上找到的解决方法: $("input[type='file']").on('change', function () { var ... -
Javascript 使用ajax与C#获取文件大小实例详解
2020-11-28 00:52:10在上传之前可以有个判断,对上传的文件有所控制,因为js控制文件大小(JS获取文件大小)有些问题,具体大家试下就知道了,在此整理了一下ajax的获取文件大小的方法,比较好用,再调试过程中,出现了c:/fakepath/ 的... -
Selenium学习(十三) selenium IDE之测试实例讲解
2020-07-08 11:52:39基本要求 1、测试人员要懂一点js,要不然遇到问题很难调试解决; 2、 准备内容 1、测试对象 2、测试用例 3、测试标准/方案 用例简介 IDE实例 经验总结 -
js+ajax实现获取文件大小的方法
2020-11-22 22:40:46本文实例讲述了js+ajax实现获取文件大小的方法。分享给大家供大家参考,具体如下: 顾名思义,通过JS和Ajax来获取上传文件的大小,在上传之前可以有个判断,对上传的文件有所控制,因为js控制文件大小(JS获取文件... -
Vue加载json文件的方法简单示例
2020-10-17 11:47:27主要介绍了Vue加载json文件的方法,结合实例形式分析了vue.js针对json文件的加载及数据读取等相关操作技巧,需要的朋友可以参考下 -
kindeditor上传本地图片实例
2018-04-03 10:06:00实例化编辑器 --> < script > var editor; KindEditor.ready( function (K) { editor = K.create( ' textarea[name="content"] ' , { uploadJson :$( ' #basePath ' ).val() + ' kindeditor/... -
nodejs实现本地上传图片并预览功能实例代码
2021-04-23 23:01:43详解nodejs实现本地上传图片并预览功能(express4.0+)Express为:4.13.1 multyparty: 4.1.2代码主要...C:\fakepath\"+文件名的形式,得不到文件真实路径,所以无法直接预览,于是采用将图片上传至服务器,传回服务器... -
jsp中点击图片弹出文件上传界面及实现预览实例详解
2021-03-13 19:01:04jsp中点击图片弹出文件上传界面及实现预览实例详解花了两天时间琢磨一下图片预览的功能任务需求如下:1:jsp页面中有一个图片(pic_1)2:点击图片弹出类似于资源管理器的界面3:选择完某一个图片之后在pic_1处预览我... -
JavaWeb学习笔记-spring-01-概述(实例)
2018-02-11 13:32:24容器简单实例 //定义bean public class MyTestBean { private String testStr = "testStr" ; public String getTestStr () { return testStr; } public void setTestStr (String ... -
地理信息系统(GIS)系列——Portal for ArcGIS
2021-01-24 20:40:58Web 应用程序 移动应用程序 ArcGIS Desktop 加载项 ArcGIS Explorer 工具 地图编码服务 网络分析服务 地理处理服务 地理数据服务 地理处理实例 ArcGIS 几何服务 打包定位器 地理处理包 3、Web Mapping APIs 创建共享... -
JavaScript_js获取上传文件的绝对路径实现方法,在html中 <input type="file" - phpStudy
2021-04-29 09:49:18Mac邮件客户端设置图文教程 基于PHP实现假装商品限时抢购繁忙的效果 Win10如何禁用系统视觉动画效果以兼容较老机器 命令行启动mssqlserver服务的方法示例 jQuery中:not选择器用法实例 JQuery中节点遍历方法实例 Win... -
JavaScript零基础入门 11:JavaScript实现图片上传并预览
2021-12-18 17:04:20一、前端界面是通过jqgrid展示的 jqgrid是典型的B/C架构(浏览器/服务器模式),服务器端只需提供数据管理,浏览器只...三、代码实例 1、jqgrid页面展示 $(document).ready(function () { $("#gridTable").jqGrid({ -
Web-拾贝
2018-03-10 13:45:55JavaScript MVC框架PK:Angular、Backbone、CanJS与Emberhttp://www.csdn.net/article/2013-04-25/2815032-A-Comparison-of-Angular-Backbone-CanJS-and-Ember一个好的js method 方法查询的网站, 有browser兼容的... -
webservice客户端 服务端(axis2)配置
2018-01-18 10:50:12一,引入jar包 pom.xml加入如下配置 fakepath axiom-api 1.2.10 fakepath axiom-impl 1.2.10 fakepath axis2-adb 1.5.4 fakepath axis2-kernel 1.5.4 fakepath axis2... -
前端开发中的文件处理功能:认识Files类与File类
2020-12-15 18:27:02文章目录前言一、HTML5为文件域新增的属性二、认识Files类1、如何创建Files类的实例2、Files类的属性3、Files类的方法三、认识File类1、如何创建File类的实例2、File类的属性四、认识单页面文件的有效地址1、blob... -
《Spring 3.0就这么简单》——1.3 环境准备
2017-05-31 13:45:51<groupId>fakepath <artifactId>com.springsource.net.sf.cglib</artifactId> <version>1.1.3 <!--依赖的Web模块类库--> <groupId>javax.servlet.jsp <artifactId>jsp-api ${jsp-api.version} <scope>... -
如何使用input表单向服务发送(占用较小)图片文件(body传输)?涉及到FileReader内置对象
2022-03-25 15:05:54// C:\fakepath\01.jpg }); script> body> 使用input:files, 可以获取到一个文件列表 <body> <input type="file" name="" id="file"> 上传button> <script> document.getElementsByClassName('btn')[0].... -
Jackson实现Object对象与Json字符串的互转
2018-01-07 13:49:53在项目开发过程中,当客户端与服务器响应时...下面我将利用实例总结如何使用jackson. 一、准备 如果你需要使用jackson,你必须得导入相应的架包,有如下三个包 jackson-annotations;jackson-core;jackson-da -
selenium使用
2021-10-12 13:46:32except Exception as e: print(e) driver: 传入WebDriver实例,即我们上例中的driver timeout: 超时时间,等待的最长时间(同时要考虑隐性等待时间) poll_frequency: 调用until或until_not中的方法的间隔时间,默认... -
前端知识之DOM和BOM
2021-11-03 18:14:49一. 前戏 JavaScript分为 ECMAScript,DOM,BOM。 ...""" BOM 浏览器对象模型 Browser Object Model js代码操作浏览器 DOM 文档对象模型 Document Object Model js代码操作标签 ...二....console.log(window.innerHei -
VMware USB Arbitration Service 无法启动的问题
2021-08-11 05:27:39同一个tomcat下不同项目间session共享问题解决方案 解决方案: 1、修改tomcat的server.xml文件 每一个web应用程序都有唯一一个ServletContext实例对象,被该web应用下面的每一个servlet共享。通过修改tomcat的... -
HTML5总结
2020-05-08 22:15:55//c:\fakepath\ 这是一个虚拟路径 3、HTML5中为文件域新增了两个属性: (1)multiple,放置性属性,允许文件域一次选择多个文件。 (2)accept,取值为表示文件类型的MIME格式字符串,可以在弹出的资源管理器中对 ...