两种方式实现

  • 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及以下不支持，其它浏览器都支持。

HTML5实现图片预览功能的更多相关文章

  1. 原生js实现ajax的文件异步提交功能、图片预览功能.实例

    采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...

  2. 如何通过js实现图片预览功能

    一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  3. 原生JS实现图片预览功能

    html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...

  4. H5图片预览功能

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  5. 通过file文件选择图片预览功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JavaScript图片上传前的图片预览功能

    JS代码: //js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 function PreviewImage(fileObj, imgPreviewI ...

  7. 34)django-上传文件,图片预览功能实现

    目录 文件上传      1)form表单提交上传(会刷新)      2)ajax上传      3)iframe      4)图片上传预览(思路保存文件的时候,把文件保存文件的路径反馈回,客户端 ...

  8. JS实现的图片预览功能

    之前的博文有实现过图片上传预览,但那种方法是预览时就将图片上传,会产生很大的浪费空间.找到了之前有人写的用JS实现的图片预览,就说用js将上传的图片显示,上传代码在之前的博文中有写到. 以下是实现的代 ...

  9. ext图片预览功能实现，前端代码

    效果图: extjs代码: // 模型 Ext.define('ParkingAttachment', {extend: "Ext.data.Model", idProperty: ...

随机推荐

  1. Android 8 声音调整过程

    记录Android 8声音调整过程. frameworks\base\services\core\java\com\android\server\policy\PhoneWindowManager.j ...

  2. MongoDB mongod.exe或mongo.exe双击一闪就关闭

    场景: 在 D:\data\ 创建 db目录之后,运行 mongod -repair 原因: 磁盘满了,没有空间了. 解决方法: 把 MongoDB\data 下的 lock 文件删掉,清理下磁盘空间 ...

  3. 图形界面至少要有一个顶级Swing容器

    图形界面至少要有一个顶级Swing容器 顶级Swing容器为其它Swing组件在屏幕上的绘制和处理事件提供支持 常用的顶级容器: JFrame(框架):表示主程序窗口 JDialog(对话框):每个J ...

  4. EF5+MVC4系列(9) Razor视图引擎的核心原理;@符号的使用;输出html的转义

    一:Razor视图引擎的核心原理 Razor是ASP.NET MVC 3中新加入的技术,以作为ASPX引擎的一个新的替代项 ,他是一个视图引擎 他的核心原理,就是当读取到 @符号的时候,就认为这是开始 ...

  5. vegan 包进行 Bioenv 分析

    Bioenv 分析通过 计算样本群落结构的距离矩阵和 环境因子的距离矩阵,计算两个距离之间的相关系数,挑选出最佳的环境因子组合: 默认情况下,计算 群落结构的距离矩阵时, 使用 Bray-Curtis ...

  6. html 禁用点击事件

    1.css禁用鼠标点击事件 .disabled { pointer-events: none; } 注:(这个没有试过) jquery禁用a标签方法1 $(document).ready(functi ...

  7. linux中find命令

    1．使用name选项: 文件名选项是find命令最常用的选项,要么单独使用该选项,要么和其他选项一起使用. 可以使用某种文件名模式来匹配文件,记住要用引号将文件名模式引起来. 不管当前路径是什么,如果 ...

  8. Selenium Webdriver 的 PageObject 改造

    PageObject中提供了一个@FindBy注解,也非常好用,但由于其是一次性全部初始化所有的WebElement,对于当前还不存在于页面上的Element在初始化时就会报错,为了解决这个问题,自然 ...

  9. Windows 下 绿化 Oracle

    既然Oracle在非windows平台上可以很“绿色”的执行,那么在windows平台上有无可能呢? 答案是“Yes-No” 基本上,除了监听器(lisentner)这个异类外,Oracle实例完全可 ...

  10. mysql中,创建表的时候指定if not exists参数的作用?

    需求说明: 在创建表的时候,如果指定if not exists语句,有什么作用,在此做个实验,并且官方手册, 理解下这个参数的作用. 操作过程: 1.创建测试表test01 mysql> cre ...