两种方式实现

  • 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. 【Oracle】删除重复记录

    --复习autotrace: SET AUTOTRACE OFF --不生成AUTOTRACE 报告,这是缺省模式 SET AUTOTRACE ON EXPLAIN --AUTOTRACE只显示优化器 ...

  2. ubuntu下安装xlrd模块,Mysqldb模块

    Python中安装xlrd模块 1.从 https://pypi.python.org/pypi/xlrd  下载压缩包 2.解压所下载的压缩包 3.CD到解压文件夹,运行 sudo python s ...

  3. 这个更新需要花去 50.6 M 磁盘上总计 /boot 的空间。请在 7737k 磁盘上留出 /boot 空间。清空您的回收站和临时文件，用“sudo apt-get clean

    系统升级会下载多余的内核,删除即可. 1.命令:dpkg --get-selections|grep linux             //带image的为系统内核 2.命令:   uname -a ...

  4. hdu1106 字符串水题strtok()&&strchr()&&sscanf()+atoi()使用

    字符串的题目 用库函数往往能大大简化代码量 以hdu1106为例 函数介绍 strtok() 原型: char *strtok(char s[], const char *delim); 功能: 分解 ...

  5. 【高精度练习+卡特兰数】【Uva1133】Buy the Ticket

    Buy the Ticket Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) T ...

  6. stagefright框架（七）-Audio和Video的同步

    讲完了audio和video的处理流程,接下来要看的是audio和video同步化(synchronization)的问题.OpenCORE的做法是设置一个主clock,而audio和video就分别 ...

  7. NET基础课--异常处理X

    通常不建议如下的捕获方式  正确的方法是:某一功能函数的入口捕获基本异常即exception,分支方法或片段方法中捕获特定异常 高级: 另附:Fxcop异常监控工具

  8. hibernate报错：org.hibernate.MappingException: No Dialect mapping for JDBC type: -1

    解决方法:自定义一个Hibernate Dialect. package com.yourcompany.util ; import java.sql.Types; import org.hibern ...

  9. G - Bullseye

    Description A simple dartboard consists of a flat, circular piece of cork with concentric rings draw ...

  10. CAA调试

    在需要调试的Module(*.m)上右键,选择属性,命令位置选择你的framework目录    路径选择对应工程目录下的\intel_a(或者Win64    --    64位机器) 然后就可以尽 ...