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

时间：2023-01-27 09:15:19

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

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

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


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

[html] view plain copy js/jquery 获取本地文件的文件路劲 获取input框中type=‘file’ 中的文件路径js/jquery 获取本地文件的文件路劲 获取input框中type=‘file’ 中的文件路径
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  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 = "<img src='"+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 js/jquery 获取本地文件的文件路劲 获取input框中type=‘file’ 中的文件路径js/jquery 获取本地文件的文件路劲 获取input框中type=‘file’ 中的文件路径
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  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 = "<img src='"+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

标签：

相关文章