两种方式实现

  • 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. 不可或缺的企业OA面临问题，以及解决建议 软件定制开发 森普演示平台

    ---恢复内容开始--- 随着信息时代的来临,企业管理也相应的信息化,各种管理软件相继而出,各行各业的信息化有过成功,也有过失败(注:是以该项目是否达到用户的预期目标而言).据统计在信息化失败的案例中 ...

  2. Python3.X与Python2.x的区别

    一张图说明Python2.x与Python3.x的不同. Python3.x默认使用Unicode编码.支持中文. 更多介绍请看:https://segmentfault.com/a/11900000 ...

  3. wxPython Major类

    转载自:http://www.yiibai.com/wxpython/wxpython_major_classes.html   原始的 wxWidgets(用C++编写)是一个巨大的类库.GUI类从 ...

  4. 【HTML+CSS】浅谈：相对定位与绝对定位

    相对定位和绝对定位 ·定位标签:position  ·包括属性:relative(相对) absolute(绝对) 1.position:relative; 假设对一个元素进行相对定位.首先它将出如今 ...

  5. SqlServer判断数据库、表、存储过程、函数是否存在

    假设场景是: 需要给一个脚本给客户更新, 这个对象可能存在或不存在 -- 更新存储过程 USE [数据库名] GO SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ...

  6. Android studio教程：[4]真机测试

    有了Android studio这么好用的软件,自然要有一部不错的安卓手机,然后在真机上测试自己的程序,那样才能更好的发现程序中存在的问题,毕竟模拟器不是真正的手机嘛. 工具/原料 Android s ...

  7. OC——网络解析获取图片的应用

    headimageView=[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, DEVW, DEVW/2)]; headimageView.cont ...

  8. OC——NSArray和NSMutableArray

    /*---------------------NSArray---------------------------*/ //创建数组 NSArray *array1 = [NSArray arrayW ...

  9. 仅当使用了列的列表 并且 identity_insert 为 on 时 才能在表 中为标识列指定显式值

    当 IDENTITY_INSERT 设置为 OFF 时,不能向表 'products' 中的标识列插入显式值.” 示例: 1.首先建立一个有标识列的表:CREATE TABLE products (i ...

  10. MySQL server has gone away报错

    1.最近做插入数据库,然后一直报一个错.mysql server has gone away.(如下图) 查了好多资料,终于解决了.. 1.可能是连接超时..进入php.ini,修改wait_time ...