前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js上传图片预览

js上传图片预览

原创
作者头像
大师级码师
修改2021-09-22 10:46:26
28.2K0
修改2021-09-22 10:46:26
举报
文章被收录于专栏:大师级码师大师级码师
代码语言:javascript
复制
<!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>  
        <script type="text/javascript">  
        $(function(){  
            $(".file").change(function(){  
                var fileImg = $(".fileImg");  
                var explorer = navigator.userAgent;  
                var imgSrc = $(this)[0].value;  
                if (explorer.indexOf('MSIE') >= 0) {  
                    if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) {  
                        imgSrc = "";  
                        fileImg.attr("src","/img/default.png");  
                        return false;  
                    }else{  
                        fileImg.attr("src",imgSrc);  
                    }  
                }else{  
                    if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) {  
                        imgSrc = "";  
                        fileImg.attr("src","/img/default.png");  
                        return false;  
                    }else{  
                        var file = $(this)[0].files[0];  
                        var url = URL.createObjectURL(file);  
                        fileImg.attr("src",url);  
                    }  
                }  
            })  
        })  
        </script>  
    </head>  
    <body>  
        <form enctype="multipart/form-date" method="post">  
            <input type="file" class="file">  
            <input type="submit" class="sub">  
        </form>  
        <img src="" class="fileImg">  
    </body>  
    </html>  

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档