JS获取本地文件绝对路径-预览本地图片

最新推荐文章于 2024-05-31 16:16:35 发布

forwardNow

最新推荐文章于 2024-05-31 16:16:35 发布

阅读量1.8w

点赞数 1

分类专栏：前端文章标签： JS获取本地文件绝对路径预览本地图片

本文链接：https://blog.csdn.net/wuqinfei_cs/article/details/38396371

版权

前端专栏收录该内容

268 篇文章 0 订阅

订阅专栏

通过file input框显示本地文件的绝对路径，在网上找了很久，一直只有IE和Firefox的实现，没有谷歌。

这里有个解决方案，可以显示本地图片，但是读不到绝对路径。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>3</title>
<script>
function getFullPath(obj) {
    if (obj) {
        //Internet Explorer 
        if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
            obj.select();
            return document.selection.createRange().text;
        } 
        //Firefox
        if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
            if (obj.files) {
                return obj.files.item(0).getAsDataURL();
            }
            return obj.value;
        } 

        //兼容chrome、火狐等，HTML5获取路径       
        if (typeof FileReader != "undefined") {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById("pic").src = e.target.result + ""; 
            }
            reader.readAsDataURL(obj.files[0]);
        } else if (browserVersion.indexOf("SAFARI") > -1) {
            alert("暂时不支持Safari浏览器!");
        }

    } 
}

function showPic(obj) {
    var fullPath = getFullPath(obj);
    if (fullPath) {
        document.getElementById("pic").src = fullPath + "";
    }
}
</script>
</head>
<body>
    <input type="file" οnchange="showPic(this)">
    <img src="" id="pic">
</body>
</html>