您的位置：首页 > Web前端 > JQuery

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

2016-08-14 22:14 661 查看

分为两部分，自己去判断浏览器的类型，然后调用不同函数，一定要引入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 = "";

    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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

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