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

    xiaoxiao2025-06-06  43

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

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

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

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

    [html]  view plain  copy   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml">   <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <title>无标题文档</title>         <script type="text/javascript" src="软件工程概论/软件工程实验原型/js/jquery-1.8.3.min.js"></script>   <script type="text/javascript">      var imgurl = "";      function getImgURL(node) {         var imgURL = "";           var file = null;       if(node.files && node.files[0] ){           file = node.files[0];        }else if(node.files && node.files.item(0)) {                                           file = node.files.item(0);          }                 //这种获取方式支持IE10         node.select();         imgURL = document.selection.createRange().text;           alert(imgURL);                     var textHtml = "<img src='"+imgURL+"'/>";     //创建img标签用于显示图片       alert(textHtml);       $(".mark").after(textHtml);       return imgURL;   }             </script>      </head>      <body>       <div style="width:200px; height:210px; border:1px solid red;" id="show">           <div class="mark"></div>       </div>   <br>   <input type="file" value="上传文件" onchange="getImgURL(this)">   </body>   </html>   2.火狐和chrome浏览器,其实这个获得的文件路径不是我们能看懂的,它是一个对象,不过浏览器能解析,可能出于浏览器的安全考虑吧,本来不能显示文件路径

    [html]  view plain  copy   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml">   <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <title>无标题文档</title>      <script type="text/javascript" src="软件工程概论/软件工程实验原型/js/jquery-1.8.3.min.js"></script>   <script type="text/javascript">      var imgurl = "";      function getImgURL(node) {         var imgURL = "";           try{              var file = null;           if(node.files && node.files[0] ){               file = node.files[0];            }else if(node.files && node.files.item(0)) {                                               file = node.files.item(0);              }              //Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径           try{               //Firefox7.0                imgURL =  file.getAsDataURL();                 //alert("//Firefox7.0"+imgRUL);                                    }catch(e){               //Firefox8.0以上                                             imgRUL = window.URL.createObjectURL(file);               //alert("//Firefox8.0以上"+imgRUL);           }        }catch(e){      //这里不知道怎么处理了,如果是遨游的话会报这个异常                            //支持html5的浏览器,比如高版本的firefox、chrome、ie10           if (node.files && node.files[0]) {                                         var reader = new FileReader();                reader.onload = function (e) {                                                         imgURL = e.target.result;                 };               reader.readAsDataURL(node.files[0]);            }          }       //imgurl = imgURL;       creatImg(imgRUL);       return imgURL;   }             function creatImg(imgRUL){   //根据指定URL创建一个Img对象       var textHtml = "<img src='"+imgRUL+"'/>";       $(".mark").after(textHtml);   }             </script>      </head>      <body>       <div style="width:90px; height:110px; overflow:hidden; border:1px solid red;" id="show">           <div class="mark"></div>       </div>   <br>   <input type="file" value="上传文件" onchange="getImgURL(this)">   </body>   </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

    转载请注明原文地址: https://ju.6miu.com/read-1299653.html
    最新回复(0)