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 相关文章推荐
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
JQuery EasyUI 数字格式化处理示例
May 05 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
详解在网页上通过JS实现文本的语音朗读
Mar 28 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 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
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
php阳历转农历优化版
2016/08/08 PHP
Javascript的一种模块模式
2008/03/22 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
Vue中的slot使用插槽分发内容的方法
2018/03/01 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
Python批量更改文件名的实现方法
2017/10/29 Python
Python简单读取json文件功能示例
2017/11/30 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
电子信息毕业生自荐信
2013/11/16 职场文书
中学实习教师自我鉴定
2013/12/12 职场文书
高校辅导员推荐信范文
2013/12/25 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
同意离婚答辩状
2015/05/22 职场文书
聊聊Python中关于a=[[]]*3的反思
2021/06/02 Python
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android