博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js获取input file完整路径的方法
阅读量:4608 次
发布时间:2019-06-09

本文共 1939 字,大约阅读时间需要 6 分钟。

function getPath()

{
  //判断浏览器
  var Sys = {};
  var obj = document.getElementById("headImg");
  var viewer = document.getElementById("viewImg");
  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 path="";
  if(Sys.ie<="6.0"){
    //ie5.5,ie6.0
    viewer.src = obj.value;
  }else if(Sys.ie>="7.0"){
    //ie7,ie8
    obj.select();
    //加上这一句防止报告安全问题
    obj.blur();
    viewer.src = document.selection.createRange().text;
  }else if(Sys.firefox){
    if (obj.files) {
        var accept = ["image/png","image/jpeg","image/jpg","image/gif"];
        if (accept.indexOf(obj.files[0].type) > -1) {
            var reader = new FileReader();
            reader.readAsDataURL(obj.files[0]);
            //延迟一会等待文件读取完毕
            var t = setTimeout(function(){
            viewer.src = reader.result;
            clearTimeout(t);
            },100)
        }
    }
    else
    {
        viewer.src = obj.value;
    }
  }else if(Sys.chrome){
    viewer.src = obj.value;
  }
}
<form>
<input type="file" id="headImg" />
<input id="btnOk" type="button" value="ok" οnclick="getPath()"/>
<img src="http://blog.163.com/zhchf_52@yeah/blog/" alt="view" id="viewImg" />
</form>

 

另一种:

var obj = document.getElementById("headImg");

  var viewer = document.getElementById("viewImg");

obj.οnchange=function(){
viewImg.value=getFullPath(this);
}
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(); 
 } 
 return obj.value; 
 } 
 return obj.value; 
 
 
参考资料:http://blog.sina.com.cn/s/blog_771875550100xjxh.html
http://blog.163.com/zhchf_52@yeah/blog/static/678229742013119113558963/

转载于:https://www.cnblogs.com/byayn/p/3958482.html

你可能感兴趣的文章
[转]系统吞吐量(TPS)、用户并发量、性能测试概念和公式
查看>>
jQuery.extend 函数详解
查看>>
STL set
查看>>
c语言数组那些骚事儿
查看>>
JAVA 求数组中的最大值
查看>>
Mac之delete键
查看>>
牛客网 2018年全国多校算法寒假训练营练习比赛(第四场) C.求交集
查看>>
otsu的自动阈值分割技术
查看>>
js取得前2位字符
查看>>
ssh切换不同git服务器
查看>>
xml解析
查看>>
IIS 日志 时间不对的解决方法
查看>>
页面滑动悬停在某个控件(两种做法)
查看>>
matrix 矩阵(多维DP)
查看>>
Delphi项目构成之单元文件PAS
查看>>
"Coding Interview Guide" -- 字符串的统计字符串
查看>>
css:清楚html所有标签自带属性
查看>>
jquery 回车事件
查看>>
文件上传类
查看>>
浅灰色的表格 可静态排序
查看>>