两种方式实现

  • URL
  • FileReader

<!DOCTYPE HTML>
<html>
    <head>
    <meta charset="utf-8">
    <title>html5 图片上传预览</title>
    <style>
        #preview {
            width: 300px;
            height: 300px;
            overflow: hidden;
        }
        #preview img {
            width: 100%;
            height: 100%;
        }
    </style>
    <script src="../jquery/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        function preview1(file) {
            var img = new Image(), url = img.src = URL.createObjectURL(file)
            var $img = $(img)
            img.onload = function() {
                URL.revokeObjectURL(url)
                $('#preview').empty().append($img)
            }
        }
        function preview2(file) {
            var reader = new FileReader()
            reader.onload = function(e) {
                var $img = $('<img>').attr("src", e.target.result)
                $('#preview').empty().append($img)
            }
            reader.readAsDataURL(file)
        }
         
        $(function() {
            $('[type=file]').change(function(e) {
                var file = e.target.files[0]
                preview1(file)
            })
        })
    </script>
</head>
<body>
<form enctype="multipart/form-data" action="" method="post">
    <input type="file" name="imageUpload"/>
    <div id="preview" style="width: 300px;height:300px;border:1px solid gray;"></div>
</form>
</body>
</html>

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

HTML5图片预览的更多相关文章

  1. 如何在HTML5 图片预览

    HTML5的 File API允许浏览器访问本地文件系统,借助它我们可以实现以前无法实现的本地图片预览功能. 先介绍下该API实现了那些接口: 1.Blob接口,表示原始的二进制数据,通过它可以访问到 ...

  2. HTML5图片预览 放大

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  4. HTML5可预览多图片ajax上传(使用formData传递数据)

    HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...

  5. HTML5浏览器端图片预览&生成Base64

    本文主要介绍如何通过拖拽方式在浏览器端实现图片预览,并生成图片的Base64编码. 工具链接:图片转Base64. 首先介绍一下FileReader, FileReader对象允许浏览器使用File或 ...

  6. HTML5实现图片预览功能

    两种方式实现 URL FileReader Index.jsp文件 <%@page contentType="text/html" pageEncoding="UT ...

  7. JS魔法堂之实战：纯前端的图片预览

    一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...

  8. dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

  9. 基于jquery实现的上传图片及图片预览效果代码

    <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...

随机推荐

  1. poj 1753 Flip Game（bfs状态压缩 或 dfs枚举）

    Description Flip game squares. One side of each piece is white and the other one is black and each p ...

  2. wxpython StatuBar 带进度条的状态栏

    # -*- coding: utf- -*- import wx class customStatusBar(wx.StatusBar): def __init__(self, parent): wx ...

  3. 产生冠军(set，map，拓扑结构三种方法)

    产生冠军 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  4. HTML高级标签（2）————窗体分帧（2）————后台管理页面

    使用frameset进行窗体分帧.构建简易的后台页面.这篇博客就作为一个简易后台管理页面的实战演练. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3px ...

  5. PHP学习笔记一

    <html> <head> <title></title> <meta http-equiv="content-type" c ...

  6. Mongodb 安装和启动

    一.首先去官网下载对应的的mongodb ,本人的操作系统是win7 64位 mongodb-win32-x86_64-2.0.6.rar 解压安装:进入到bin目录下,会看到N多的.exe文件 二. ...

  7. HTML中发送方式（method）中get和post的比较

    get的方式是将表单控件的控件名name和取值value信息经过编码后,通过URL发送(可以在地址栏里看到).而post则将表单的内容通过http发送.一个 get通过URL传送变量,能传送的数据总量 ...

  8. codeforces 713D D. Animals and Puzzle 二分+二维rmq

    题目链接 给一个01矩阵, 然后每个询问给出两个坐标(x1, y1), (x2, y2). 问你这个范围内的最大全1正方形的边长是多少. 我们dp算出以i, j为右下角的正方形边长最大值. 然后用二维 ...

  9. std::map的insert和下标[]访问

    在map中插入元素 改变map中的条目非常简单,因为map类已经对[]操作符进行了重载 enumMap[1] = "One";enumMap[2] = "Two" ...

  10. CLR读书笔记——委托

    协变性和逆变性 协变性是指方法能返回从委托返回类型派生的一个类型. 逆变性是指获取的参数可以是委托参数类型的基类. 举个例子吧,看以下定义的委托,以及方法. delegate Object MyCal ...