两种方式实现

  • 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. 安装vs2015的时候出现的各种 1402错误

    经搜索与尝试,确认为注册表权限问题,改过好几个子项,均提示不能修改设置子项的所有者什么的,后来一怒之下,直接把install节点下的compom项的权限的administratos权限删掉,删除的时候 ...

  2. DOTween 模仿NGUI Tween

    最近再做一个小的项目,只要使用的是DOTween 动画. 但是感到DOTween 在某些方面不如 NGUI的Twenn 比较好用 所以就模仿了一下 在此,请各位大神指点一下 public class ...

  3. C#.Net前台线程与后台线程的区别

    本文来自:http://www.cnblogs.com/zfanlong1314/archive/2012/02/26/2390455.html .Net的公用语言运行时(Common Languag ...

  4. WPF拖动总结[转载]

    WPF拖动总结   这篇博文总结下WPF中的拖动,文章内容主要包括: 1.拖动窗口 2.拖动控件 Using Visual Studio 2.1thumb控件 2.2Drag.Drop(不连续,没有中 ...

  5. 关于iOS多线程，你看我就够了

    在这篇文章中,我将为你整理一下 iOS 开发中几种多线程方案,以及其使用方法和注意事项.当然也会给出几种多线程的案例,在实际使用中感受它们的区别.还有一点需要说明的是,这篇文章将会使 用 Swift  ...

  6. oracle中的rowid--伪列-删除表中的重复内容-实用

    1.rowid是一个伪列,是用来确保表中行的唯一性,它并不能指示出行的物理位置,但可以用来定位行. 2.rowid是存储在索引中的一组既定的值(当行确定后).我们可以像表中普通的列一样将它选出来. 3 ...

  7. HTML之学习笔记（二）颜色体系

    html页面的颜色表示法有三种:英文表示,16进制表示和10进制表示.颜色通过三原色即红.绿.蓝三种按比例混合而成,如红色的10进制表示为255,0,0,即按照红色.绿色.蓝色的格式,权值取0~255 ...

  8. EasyUI时间格式化

    changeDateFormatNodate: function (cellval) { var date = new Date(parseInt(cellval.replace("/Dat ...

  9. Python 初学

    一. 前言 不怕各位园友笑话,今年年初时,我才知道有一个叫python的编程语言,听说它很大强大,而我只会用c#,正想好好再学一门新语言,还有人分享自己的经验时说,使用python制作的脚本,再做持续 ...

  10. RTP InitializeComponent() 报错

    注意xaml中x:Class 是不是相应改了,下面2处标红的部分是否一致. namespace RTP.ToolKits{ /// <summary> /// Interaction lo ...