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

素颜马尾好姑娘i 2022-08-10 16:52 355阅读 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>

发表评论取消回复

表情：

评论列表（有 0 条评论，355人围观）

还没有评论，来说两句吧...

相关阅读

相关文件预览(通过URL访问本地资源)

一、addResourceHandlers：预览图片和pdf，其他文件不支持图片或者视频存放在专门的服务器上面(Windows服务器),假设存储路径为C:\\upload\

Bertha 。/ 2023年09月28日 14:18/ 0 赞/ 187 阅读

相关 JS_js获取文件路径,js获取图片路径

//获取文件路径 function getObjectURL(file) { var url = null if (windo

Bertha 。/ 2022年11月21日 09:58/ 0 赞/ 292 阅读

相关 JS 本地图片预览

　　　　　　 JS 本地图片预览效果附上： ![这里写图片描述][20160706182807331] 代码附上： <!DOCTYPE htm

柔光的暖阳◎/ 2022年09月23日 08:09/ 0 赞/ 304 阅读

相关 html选择本地图片即时预览

最近在做一个.net mvc的网站，想让用户在网页中上传图片的过程中预览图片，本以为很简单，以为可以直接在html中解决，百度了很多才发现貌似挺麻烦，综合一些大神的回答，

谁践踏了优雅/ 2022年09月22日 11:44/ 0 赞/ 308 阅读

相关 MinIO 直接预览MinIO文件服务器保存的图片（获取图片绝对路径）

1 Maven 依赖 <dependency> <groupId>org.springframework.boot</groupI

￡神魔★判官ぃ/ 2022年08月29日 10:57/ 1 赞/ 1502 阅读

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

通过file input框显示本地文件的绝对路径，在网上找了很久，一直只有IE和Firefox的实现，没有谷歌。这里有个解决方案，可以显示本地图片，但是读不到绝对

素颜马尾好姑娘i/ 2022年08月10日 16:52/ 0 赞/ 356 阅读

相关 JavaScript 本地图片预览

<!DOCTYPE html> <!-- <!DOCTYPE html>一定要放在第一行,除非上面都是空行在HTML规范中,单独存在的标签是不需要使用/来自我

绝地灬酷狼/ 2022年07月10日 20:43/ 0 赞/ 406 阅读

相关 Jsp 根据绝对路径加载本地图片

index.jsp <%-- Created by IntelliJ IDEA. User: wkk Date: 2017/5/2

r囧r小猫/ 2022年06月15日 09:51/ 0 赞/ 311 阅读

相关 IE9下本地图片预览JS代码修改

AlphaImageLoader 说明：在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable

Bertha 。/ 2022年06月13日 12:47/ 0 赞/ 302 阅读

相关本地图片在线预览

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

一时失言乱红尘/ 2022年06月04日 06:28/ 0 赞/ 399 阅读