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

     原文：http://blog.csdn.net/niyingxunzong/article/details/16989947

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

    标签： javascriptjsjqueryobjectjs 图片实时预览
    2013-11-27 18:38 14483人阅读 评论(1) 收藏 举报
     分类：

    版权声明：本文为博主原创文章，未经博主允许不得转载。

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

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

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

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

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    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="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
     
     在CODE上查看代码片派生到我的代码片
    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="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
  • 相关阅读:
    【Docker】命令 start
    【Docker】命令 create
    【Docker】命令 docker
    【Docker】命令 pull
    【Docker】命令 search
    【Docker】命令 info
    【Docker】命令 version
    Java常用类——Random类
    Java常用类——BigInteger& BigDecimal
    Java常用类——Math类
  • 原文地址：https://www.cnblogs.com/wenjie/p/6020159.html
Copyright © 2020-2023  润新知