HTML5实现图片预览功能

时间：2022-07-17 11:51:58

两种方式实现

  • URL
  • FileReader

Index.jsp文件

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>JSP Page</title>

        <link rel="stylesheet" type="text/css" href="css/common.css" />

        <script type="text/javascript" src="js/jquery-1.11.1.js" ></script>

        <script type="text/javascript">

            //方式1：URL方式实现

            function preview1(file) {

                var img = new Image(), url = img.src = URL.createObjectURL(file);

                var $img = $(img);

                img.onload = function() {

                    URL.revokeObjectURL(url);

                    $('#previewImg').empty().append($img);

                };

            }

            //方式2：FileReader方式实现

            function preview2(file) {

                var reader = new FileReader();

                reader.onload = function(e) {

                    var $img = $('<img>').attr("src", e.target.result);

                    $('#previewImg').empty().append($img);

                };

                reader.readAsDataURL(file);

            }

            $(function() {

                //jquery实现图片点击显示

                $(".thumbs a").click(function() {

                    var largePath = $(this).attr("href");

                    var largeAlt = $(this).attr("title");

                    $("#largeImg").attr({

                        src: largePath,

                        alt: largeAlt

                    });

                    return false;

                });

                //实现图片预览功能：preview1使用URL方式实现;preview2使用FileReader方式实现

                $('[type=file]').change(function(e) {

                    var file = e.target.files[0];

                    preview2(file);

                });

            });

        </script>

    </head>

    <body>

        <form action="">

            请选择图片：<input id="myfile" name="myfile" type="file" />

            <div id="previewImg"></div>

        </form>

        <hr>

        <h1>图片预览</h1>

        <p><img id="largeImg" src="data:images/img1-lg.jpg" alt="Large Image" /></p>

        <p class="thumbs">

            <a href="images/img2-lg.jpg" title="image2"><img src="data:images/img2-thumb.jpg"></a>

            <a href="images/img3-lg.jpg" title="image3"><img src="data:images/img3-thumb.jpg"></a>

            <a href="images/img4-lg.jpg" title="image4"><img src="data:images/img4-thumb.jpg"></a>

            <a href="images/img5-lg.jpg" title="image5"><img src="data:images/img5-thumb.jpg"></a>

            <a href="images/img6-lg.jpg" title="image6"><img src="data:images/img6-thumb.jpg"></a>

        </p>

    </body>

</html>

common.css文件

body {

    margin: 20px auto;

    padding:;

    width: 580px;

    font: 75%/120% Arial, Helvetica, sans-serif;

    text-align:center;

}

h2 {

    font: bold 190%/100% Arial, Helvetica, sans-serif;

    margin: 0 0 .2em;

}

h2 em {

    font: normal 80%/100% Arial, Helvetica, sans-serif;

    color: #999999;

}

#largeImg {

    border: solid 1px #ccc;

    width: 550px;

    height: 400px;

    padding: 5px;

}

.thumbs img {

    border: solid 1px #ccc;

    width: 100px;

    height: 100px;

    padding: 4px;

}

.thumbs img:hover {

    border-color: #FF9900;

}

#large{

    position:absolute;

    z-index:;

}

URL.revokeObjectURL方法Opera不支持，FileReader除IE9及以下不支持，其它浏览器都支持。

相关文章