JS获取input file绝对路径的方法(推荐)


Posted in Javascript onAugust 02, 2016

最近因需要上传文件到oracle blob里, 在获取文件路径的遇到些问题,由于安全原因,新版的浏览器都不支持直接获取本地URL,在网上找了些方法,如下:

<script type="text/javascript">
//FX获取文件路径方法
function readFileFirefox(fileBrowser) {
  try {
    netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
  } 
  catch (e) {
    alert('无法访问本地文件,由于浏览器安全设置。为了克服这一点,请按照下列步骤操作:(1)在地址栏输入"about:config";(2) 右键点击并选择 New->Boolean; (3) 输入"signed.applets.codebase_principal_support" (不含引号)作为一个新的首选项的名称;(4) 点击OK并试着重新加载文件');
    return;
  }
  var fileName=fileBrowser.value; //这一步就能得到客户端完整路径。下面的是否判断的太复杂,还有下面得到ie的也很复杂。
  var file = Components.classes["@mozilla.org/file/local;1"]
    .createInstance(Components.interfaces.nsILocalFile);
  try {
    // Back slashes for windows
    file.initWithPath( fileName.replace(/\//g, "\\\\") );
  }
  catch(e) {
    if (e.result!=Components.results.NS_ERROR_FILE_UNRECOGNIZED_PATH) throw e;
    alert("File '" + fileName + "' cannot be loaded: relative paths are not allowed. Please provide an absolute path to this file.");
    return;
  }
  if ( file.exists() == false ) {
    alert("File '" + fileName + "' not found.");
    return;
  }


 return file.path;
}


//根据不同浏览器获取路径
function getvl(obj){
//判断浏览器
 var Sys = {}; 
 var ua = navigator.userAgent.toLowerCase(); 
 var s; 
 (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : 
 (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] : 
 (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] : 
 (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] : 
 (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
 var file_url="";
 if(Sys.ie<="6.0"){
  //ie5.5,ie6.0
  file_url = obj.value;
 }else if(Sys.ie>="7.0"){
  //ie7,ie8
  obj.select();
  file_url = document.selection.createRange().text;
 }else if(Sys.firefox){
  //fx
  //file_url = document.getElementById("file").files[0].getAsDataURL();//获取的路径为FF识别的加密字符串
  file_url = readFileFirefox(obj);
 }else if(Sys.chrome){
  file_url = obj.value;
 }
 //alert(file_url);
 document.getElementById("text").innerHTML="获取文件域完整路径为:"+file_url;
}
</script>
<h1>JS获取文件域完整路径的方法,兼容不同浏览器</h1>
<div id="text" style="color:#f00;"></div>
<input type="file" id="file" onchange="getvl(this)" />

以上代码在IE 6 7 8均正常使用,在IE9下,document.selection.createRange()拒绝访问,看来安全性有所提高。

最后测试发现,在IE9下,如果file控件获得焦点,则document.selection.createRange()拒绝访问,

因此,只需要在obj.select()后面加一句obj.blur()即可。

EX:

else if(Sys.ie>="7.0"){
  //ie7,ie8
  obj.select();
  obj.blur();
  file_url = document.selection.createRange().text;
 }


// obj = document.getElementById("file");

以上这篇JS获取input file绝对路径的方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
Javascript查询DBpedia小应用实例学习
Mar 07 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
jquery实现手风琴效果
Nov 20 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 Javascript
js链表操作(实例讲解)
Aug 29 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
JS内部事件机制之单线程原理
Jul 02 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
微信小程序引入VANT组件的方法步骤
Sep 19 Javascript
JavaScript实现复制文章自动添加版权
Aug 02 #Javascript
js获取上传文件的绝对路径实现方法
Aug 02 #Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 #Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
Aug 02 #Javascript
jQuery实现的placeholder效果完整实例
Aug 02 #Javascript
AngularJS基础 ng-keyup 指令简单示例
Aug 02 #Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 #Javascript
You might like
PHP中输出转义JavaScript代码的实现代码
2011/04/22 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
smarty缓存用法分析
2014/12/16 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
详解Python的Django框架中的通用视图
2015/05/04 Python
Python求导数的方法
2015/05/09 Python
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
精选干货:Java精选笔试题附答案
2014/01/18 面试题
演讲稿祖国在我心中
2014/05/04 职场文书
医院营销工作计划
2015/01/16 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
nginx容器方式反向代理实战
2022/04/18 Servers