HTML5实现图片预览功能

两种方式实现

  • 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="images/img1-lg.jpg" alt="Large Image" /></p>
        <p class="thumbs">
            <a href="images/img2-lg.jpg" title="image2"><img src="images/img2-thumb.jpg"></a>
            <a href="images/img3-lg.jpg" title="image3"><img src="images/img3-thumb.jpg"></a>
            <a href="images/img4-lg.jpg" title="image4"><img src="images/img4-thumb.jpg"></a>
            <a href="images/img5-lg.jpg" title="image5"><img src="images/img5-thumb.jpg"></a>
            <a href="images/img6-lg.jpg" title="image6"><img src="images/img6-thumb.jpg"></a>

        </p>
    </body>
</html>

 

common.css文件

body {
    margin: 20px auto;
    padding: 0;
    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:999;
}

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

posted @ 2017-02-01 09:41  齐心  Views(2786)  Comments(0)  Edit  收藏  举报