在html中显示本地图片

最新推荐文章于 2025-07-03 22:05:48 发布

原创最新推荐文章于 2025-07-03 22:05:48 发布 · 2w 阅读

6 ·

CC 4.0 BY-SA版权

Web notes 专栏收录该内容

10 篇文章

订阅专栏

在html中使用javascript显示本地图片的功能如下：

<html>
    <head>
        <script type="text/javascript">
            function getFullPath(obj){ 
                if(obj){ 
                    //ie 
                    if (window.navigator.userAgent.indexOf("MSIE")>=1) { 
                        obj.select();
                        return document.selection.createRange().text; 
                    } 
                    //firefox 
                    else if(window.navigator.userAgent.indexOf("Firefox")>=1){ 
                        if(obj.files){
                            return window.URL.createObjectURL(obj.files.item(0)); 
                        }
                        return obj.value; 
                    }
                    return obj.value;
                }
            }
        </script>
    </head>
    <body>
        <input type="file" onchange="document.getElementById('img').src=getFullPath(this);" />
        <img id="img" />
    </body>
</html>

上面的代码可直接复制到一个html文件里，运行查看结果。针对火狐的那段代码对firefox 6或以前的版本可能不适用，可改为以下的代码进行测试。

                    //firefox 
                    else if(window.navigator.userAgent.indexOf("Firefox")>=1){ 
                        if(obj.files){
                            return obj.files.item(0).getAsDataURL(); 
                        }
                        return obj.value; 
                    }

参考自：如何在界面上显示本地图片 http://blog.youkuaiyun.com/qiaomuhong/article/details/7926648