js/jquery 获取本地文件的文件路劲 获取input框中type=‘file’ 中的文件路径

分为两部分,自己去判断浏览器的类型,然后调用不同函数,一定要引入jQuery,上面是我的Jquery的路径

在IE低版本中可以直接获得文件路径,不过在高版本和firefox和chrome中是不允许的。那是个漏洞

这样就能实现不用上传就可以实现图片的实时预览了


1.IE内核的部分,IE10 没问题,别的没试,

[html]  view plain  copy
 
  1. >  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档title>  
  6.   
  7.   
  8. <script type="text/javascript" src="软件工程概论/软件工程实验原型/js/jquery-1.8.3.min.js">script>  
  9. <script type="text/javascript">  
  10.   
  11. var imgurl = "";  
  12.   
  13. function getImgURL(node) {    
  14.     var imgURL = "";      
  15.     var file = null;  
  16.     if(node.files && node.files[0] ){  
  17.         file = node.files[0];   
  18.     }else if(node.files && node.files.item(0)) {                                  
  19.         file = node.files.item(0);     
  20.     }     
  21.       
  22.     //这种获取方式支持IE10    
  23.     node.select();    
  24.     imgURL = document.selection.createRange().text;      
  25.     alert(imgURL);  
  26.       
  27.       
  28.     var textHtml = "+imgURL+"'/>";     //创建img标签用于显示图片  
  29.     alert(textHtml);  
  30.     $(".mark").after(textHtml);  
  31.     return imgURL;  
  32. }  
  33.          
  34. script>  
  35.   
  36. head>  
  37.   
  38. <body>  
  39.     <div style="width:200px; height:210px; border:1px solid red;" id="show">  
  40.         <div class="mark">div>  
  41.     div>  
  42. <br>  
  43. <input type="file" value="上传文件" onchange="getImgURL(this)">  
  44. body>  
  45. html>  

2.火狐和chrome浏览器,其实这个获得的文件路径不是我们能看懂的,它是一个对象,不过浏览器能解析,可能出于浏览器的安全考虑吧,本来不能显示文件路径

[html]  view plain  copy
 
  1. >  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档title>  
  6.   
  7. <script type="text/javascript" src="软件工程概论/软件工程实验原型/js/jquery-1.8.3.min.js">script>  
  8. <script type="text/javascript">  
  9.   
  10. var imgurl = "";  
  11.   
  12. function getImgURL(node) {    
  13.     var imgURL = "";      
  14.     try{     
  15.         var file = null;  
  16.         if(node.files && node.files[0] ){  
  17.             file = node.files[0];   
  18.         }else if(node.files && node.files.item(0)) {                                  
  19.             file = node.files.item(0);     
  20.         }     
  21.         //Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径  
  22.         try{  
  23.             //Firefox7.0   
  24.             imgURL =  file.getAsDataURL();    
  25.             //alert("//Firefox7.0"+imgRUL);                           
  26.         }catch(e){  
  27.             //Firefox8.0以上                                
  28.             imgRUL = window.URL.createObjectURL(file);  
  29.             //alert("//Firefox8.0以上"+imgRUL);  
  30.         }  
  31.      }catch(e){      //这里不知道怎么处理了,如果是遨游的话会报这个异常                   
  32.         //支持html5的浏览器,比如高版本的firefox、chrome、ie10  
  33.         if (node.files && node.files[0]) {                            
  34.             var reader = new FileReader();   
  35.             reader.onload = function (e) {                                        
  36.                 imgURL = e.target.result;    
  37.             };  
  38.             reader.readAsDataURL(node.files[0]);   
  39.         }    
  40.      }  
  41.     //imgurl = imgURL;  
  42.     creatImg(imgRUL);  
  43.     return imgURL;  
  44. }  
  45.          
  46. function creatImg(imgRUL){   //根据指定URL创建一个Img对象  
  47.     var textHtml = "+imgRUL+"'/>";  
  48.     $(".mark").after(textHtml);  
  49. }  
  50.          
  51. script>  
  52.   
  53. head>  
  54.   
  55. <body>  
  56.     <div style="width:90px; height:110px; overflow:hidden; border:1px solid red;" id="show">  
  57.         <div class="mark">div>  
  58.     div>  
  59. <br>  
  60. <input type="file" value="上传文件" onchange="getImgURL(this)">  
  61. body>  
  62. html>  

3.其余的浏览器。我没有测试,不过国内的其他如360和遨游,等都有两种模式,一种是IE内核,这(1)中可以运行,第二种内核没找到好方法


4.推荐出处

https://developer.mozilla.org/zh-CN/docs/DOM

http://www.w3.org/TR/FileAPI/#dfn-revokeObjectURL

https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Example.3A_Using_object_URLs_to_display_images

你可能感兴趣的:(前端)