JS实现用户上传图片并预览（图片fakepath问题）

最新推荐文章于 2023-02-22 11:33:47 发布

原创最新推荐文章于 2023-02-22 11:33:47 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JS #图片上传 #预览 #fakepath

JS 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种在前端实现图片上传预览的方法，利用JavaScript获取文件对象并创建URL以显示图片，同时检查图片大小是否超出限制。

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

上传图片时，有时候需要获取文件的本地路径，但是浏览器的安全机制会使得路径被fakepath代替，当然，调整浏览器的相关安全设置可以解决这个问题。但我们不可能让所有用户都通过设置浏览器的安全设置来进行图片上传。

$(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  ;  
        }    
        $("#imgFile").change(function(){    
            var objUrl=getObjectURL(this.files[0]);    
            var size=this.files[0].size;    
            if(size>=1024000*5)bottomTip("图片超过5M了哦",0);    
            else{    
                 if(objUrl){    
                        $("#showImg").attr("src",objUrl);  
                    }    
            }     
        })  ;  
    })