• js获取file控件的完整路径(上传图片预览)


     1 <%@ page language="java" contentType="text/html; charset=UTF-8"
     2     pageEncoding="UTF-8"%>
     3 <!DOCTYPE html >
     4 <html>
     5 <head>
     6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     7 <title>Insert title here</title>
     8 </head>
     9 <body>
    10 <script type="text/javascript">
    11 function fun()
    12 {
    13     alert(1);
    14 }
    15 function bao(str)
    16 {        
    17     //alert(str);
    18     //int n=Integer.parseInt(str);
    19     var img="images/tx/";
    20     img+=str;
    21     img+=".gif";
    22     img = "images/map.png";
    23     //alert(img);
    24     // 取得img节点
    25     var imgNode=document.getElementById("picture");
    26 
    27     // 修改img节点的src属性
    28     imgNode.setAttribute("src",img);
    29     
    30     //oDiv.innerHTML="<img src=images/tx/2.gif width='80' height='80' border='1' />";
    31     //不能改变图片,src不能使变量!
    32 }
    33 function readFileFirefox(fileBrowser) { 
    34     try { 
    35     netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); 
    36     } 
    37     catch (e) { 
    38     alert('无法访问本地文件,由于浏览器安全设置。为了克服这一点,请按照下列步骤操作:(1)在地址栏输入"about:config";(2) 右键点击并选择 New->Boolean; (3) 输入"signed.applets.codebase_principal_support" (不含引号)作为一个新的首选项的名称;(4) 点击OK并试着重新加载文件'); 
    39     return; 
    40     } 
    41     var fileName=fileBrowser.value; //这一步就能得到客户端完整路径。下面的是否判断的太复杂,还有下面得到ie的也很复杂。 
    42     var file = Components.classes["@mozilla.org/file/local;1"] 
    43     .createInstance(Components.interfaces.nsILocalFile); 
    44     try { 
    45     // Back slashes for windows 
    46     file.initWithPath( fileName.replace(///g, "\\") ); 
    47     } 
    48     catch(e) { 
    49     if (e.result!=Components.results.NS_ERROR_FILE_UNRECOGNIZED_PATH) throw e; 
    50     alert("File '" + fileName + "' cannot be loaded: relative paths are not allowed. Please provide an absolute path to this file."); 
    51     return; 
    52     } 
    53     if ( file.exists() == false ) { 
    54     alert("File '" + fileName + "' not found."); 
    55     return; 
    56     } 
    57     return file.path; 
    58     } 
    59     //根据不同浏览器获取路径 
    60     function getpic(){ 
    61     //判断浏览器 
    62     var Sys = {}; 
    63     var ua = navigator.userAgent.toLowerCase(); 
    64     var s; 
    65     (s = ua.match(/msie ([d.]+)/)) ? Sys.ie = s[1] : 
    66     (s = ua.match(/firefox/([d.]+)/)) ? Sys.firefox = s[1] : 
    67     (s = ua.match(/chrome/([d.]+)/)) ? Sys.chrome = s[1] : 
    68     (s = ua.match(/opera.([d.]+)/)) ? Sys.opera = s[1] : 
    69     (s = ua.match(/version/([d.]+).*safari/)) ? Sys.safari = s[1] : 0; 
    70     var file_url=""; 
    71     if(Sys.ie<="6.0"){ 
    72     //ie5.5,ie6.0 
    73     file_url = document.getElementById("file").value; 
    74     }else if(Sys.ie>="7.0"){ 
    75     //ie7,ie8 
    76     var file = document.getElementById("file"); 
    77     file.select(); 
    78     file_url = document.selection.createRange().text; 
    79     }else if(Sys.firefox){ 
    80     //fx 
    81     //file_url = document.getElementById("file").files[0].getAsDataURL();//获取的路径为FF识别的加密字符串 
    82     file_url = readFileFirefox(document.getElementById("file")); 
    83     } 
    84     alert(file_url); 
    85     img = file_url;
    86     //alert(img);
    87     // 取得img节点
    88     var imgNode=document.getElementById("picture");
    89 
    90     // 修改img节点的src属性
    91     imgNode.setAttribute("src",img);
    92     
    93     } 
    94 </script>
    95     <input type ="file" id = "file" onchange="getpic()" />
    96     <img id="picture"/>
    97     
    98 </body>
    99 </html>
    <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(){ 
    //判断浏览器 
    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 = document.getElementById("file").value; 
    }else if(Sys.ie>="7.0"){ 
    //ie7,ie8 
    var file = document.getElementById("file"); 
    file.select(); 
    file_url = document.selection.createRange().text; 
    }else if(Sys.firefox){ 
    //fx 
    //file_url = document.getElementById("file").files[0].getAsDataURL();//获取的路径为FF识别的加密字符串 
    file_url = readFileFirefox(document.getElementById("file")); 
    } 
    //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" /> 
    <input name="" type="button" value="获取" onClick="getvl();"> 
  • 相关阅读:
    ovs流表机制(四)用vxlan实现多个节点的vm通信(二)
    expect
    在Scrapy中使用Selenium
    Python网络编程
    Scrapy持久化存储
    Scrapy基础
    Selenium实例
    XML和XPATH
    猫眼电影爬取
    Request模块
  • 原文地址:https://www.cnblogs.com/xiaofanke/p/4355256.html
Copyright © 2020-2023  润新知