上传图片预览，兼容IE8

最新推荐文章于 2018-03-23 17:23:36 发布

南有先生

最新推荐文章于 2018-03-23 17:23:36 发布

阅读量517

点赞数

文章标签：图片 ie 8

本文介绍了一个简单的文件上传功能实现方式，并演示了如何在用户选择文件后立即进行预览，包括对不同浏览器的支持及图片格式的验证。

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