js上传图片预览详解编程语言

    <!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>  

原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/8703.html

(0)
上一篇 2021年7月18日
下一篇 2021年7月18日

相关推荐

发表回复

登录后才能评论