关于无法通过浏览器获取到图片的真实路径，显示fakepath问题

最新推荐文章于 2021-08-06 04:41:19 发布

原创最新推荐文章于 2021-08-06 04:41:19 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

javascr 专栏收录该内容

3 篇文章

订阅专栏

在使用JavaScript操作图片时，遇到浏览器无法获取图片真实路径，仅显示fakepath的情况。尝试通过某些方法获取完整路径，却因浏览器安全限制导致getAsDataURL()方法报错，该方法在许多浏览器中被禁用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
	<title>图片的增删</title>
	<style type="text/css">
    * {
    	list-style: none;
    	padding: 0px;
    	margin: 0px;
    }
	#container {
	 	width: 1000px;
	 	/* margin: 0 auto; */
	 	background-color: pink;
	 	float: left;
	 }
	img {
	 	height: 300px;
	 	width: 300px;
	 }
	ul li {
		float: left;
		margin-left: 25px;
		margin-bottom: 25px;
	}
    </style>

    <script type="text/javascript">
    	window.onload =function() {
    		//alert("hello world");
    		var uploadPic = document.getElementById("uploadPic");
            //解决fackpath代码
            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 obj.files.item(0).getAsDataURL(); 
                return window.URL.createObjectURL(obj.files[0]);
             } 
             return obj.value; 
             } 
        return obj.value; 
         } 
        }
    		//alert(uploadPic.value);
    		//为input标签绑定一个单击响应函数
    		uploadPic.onchange =function() {
    			//var fileSrc = uploadPic.value;
    		    var img = document.createElement("img");
    		    var li = document.createElement("li");
                var ul=document.getElementById("list");
    		    li.appendChild(img);
    		    ul.appendChild(li);
                img.src = getFullPath(uploadPic) ;
                //alert(ul);    		
    		}
    	}
    </script>
</head>
<body>
    <div id="container">
    	<ul id="list">
    	    <li><img src="1.jpg" /></li>
    	</ul>
    </div>
    <br/><br/>
    <!-- <button id="btn1">添加图片</button> -->
    <input type="file" id="uploadPic" name="uploadPic" />
</body>
</html>

写这段代码的时候就遇到了无法通过浏览器获取完整的路径，查看码源一直所有添加进去的图片的路径都显示的是fackpath。
在百度上找到一段能通过浏览器获取图片完整路径的代码，不料控制台又出现 ***getAsDataURL() is undefined***的报错信息，很多浏览器都停用了这个方法，

//return obj.files.item(0).getAsDataURL(); 
return window.URL.createObjectURL(obj.files[0]);//与被停用的方法一样的功能