图片上传预览，解决路径为fakepath

最新推荐文章于 2021-02-28 13:30:03 发布

Joker_Wangx

最新推荐文章于 2021-02-28 13:30:03 发布

阅读量3k

点赞数 1

分类专栏： js 文章标签： javascript fakepath 文件上传预览

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

相信大家都遇到过用JAVASCRIPT获取一个上传图片的file的值的问题。

百度一下差不多是说浏览器基于保护用户的相关安全措施，隐藏了上传的真实路径，用fakepath代替，当然，调整浏览器的相关安全设置可以解决这个问题。

但我们不可能让所有用户都通过设置浏览器的安全设置来进行图片上传，这种方法在网络交互上显然不现实。

直接上代码！！！

<html>  
<head>  
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>  
<script type="text/javascript">  
    $(function(){  
        function getObjectURL(file){    
            var url=null     
            if(window.createObjectURL!=undefined){ // basic    
                url=window.createObjectURL(file)    
            }else if(window.URL!=undefined){ // mozilla(firefox)    
                url=window.URL.createObjectURL(file)    
            }else if(window.webkitURL!=undefined){ // webkit or chrome    
                url=window.webkitURL.createObjectURL(file)    
            }    
            return url  ;  
        }    
        $("#face_upload").change(function(){    
            var objUrl=getObjectURL(this.files[0]);    
            var size=this.files[0].size;    
            if(size>=1024000*10){
            	bottomTip("图片超过10M了哦",0)
            }else{    
                if(objUrl){    
                    $("#wx").attr("src",objUrl);  
                }    
            }     
        });  
    })  
</script>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>Insert title here</title>  
</head>  
<body>  
    <form  enctype="multipart/form-data">  
                  图片 <input type="file" id="face_upload"/><br>  
        <img src="" height="200" width="200" id="wx"/>  
    </form>  
</body>  
</html>

Joker_Wangx

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片上传预览，解决路径为fakepath

相信大家都遇到过用JAVASCRIPT获取一个上传图片的file的值的问题。百度一下差不多是说浏览器基于保护用户的相关安全措施，隐藏了上传的真实路径，用fakepath代替，当然，调整浏览器的相关安全设置可以解决这个问题。但我们不可能让所有用户都通过设置浏览器的安全设置来进行图片上传，这种方法在网络交互上显然不现实。直接上代码！！！
复制链接

扫一扫