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();">