1.说明

1)createObjectURL

　　作用：创建url（creates  a URL for the specified object）;

　　语法：var url = URL.createObjectURL(object,options);

　　参数说明：1）object可以包含下列类型：Blob，MSStram，IstaorageItem，MediaCapture，IRandomAccessStreamWithContentType，

　　　　　　　2）options若设置为true，则是oneTimeOnly attribute，doesn't need to be revoked once used，即只是用一次

2）revokeObjectURL

　　作用：将对象鱼url关联（rovokes a URL from  a document and frees the object associated with that URL）

　　语法：var retval = URL.revokeObjectURL(url);

2.例子

<!DOCTYPE HTML>

<html>

    <head>

    <meta charset="utf-8">

    <style>

        #preview {

            width: 300px;

            height: 300px;

            overflow: hidden;

        }

        #preview img {

            width: 100%;

            height: 100%;

        }

    </style>

    <script src="../js/jquery-1.9.1.min.js"></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>

 <script type="text/javascript">

        $(function(){

            $('[type="file"]').change(function(e){

                var file = e.target.files[0];

                preview(file);

            });

        })

        function preview(file){

            var img = new Image();

            url = img.src=URL.createObjectURL(file);

            var $img = $(img);

            img.onload = function(e){

                URL.revokeObjectURL(url);

                $('#preview').empty().append($img);

            }

        }

    </script>

</html>

效果如下：（点击上传后立刻在页面上显示）

URL图片预览（createObjectURL）的更多相关文章

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

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

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

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

  3. js 图片预览

    图片预览 $('#pac_recipe').change(function() { var imgsrc = ''; ]) { //chrome firefox imgsrc = window.URL ...

  4. 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

    html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...

  5. js本地图片预览代码兼容所有浏览器

    html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...

  6. javascript 实现图片预览（未上传到服务器端）

    1,图片预览 越来越多的浏览器为了安全,都不能获得文件的,全路径,实现图片预览实现起来有点麻烦.有人选择复制图片到服务器的某个路径下,然后从服务器端找到路径,实现预览.但这不是最佳实现方案,如果用户一 ...

  7. js图片预览插件，不涉及上传

    小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...

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

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

  9. input file样式修改，图片预览删除功能

    本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这 ...

随机推荐

  1. UI实时预览最佳实践（转）

    UI实时预览最佳实践 概要:Android中实时预览UI和编写UI的各种技巧.本文的例子都可以在结尾处的示例代码中看到并下载.如果喜欢请star,如果觉得有纰漏请提交issue,如果你有更好的点子可以 ...

  2. fluentd结合kibana、elasticsearch实时搜索分析hadoop集群日志<转>

    转自 http://blog.csdn.net/jiedushi/article/details/12003171 Fluentd是一个开源收集事件和日志系统,它目前提供150+扩展插件让你存储大数据 ...

  3. redis 中文手册

    https://redis.readthedocs.org/en/latest/ http://www.cnblogs.com/ikodota/archive/2012/03/05/php_redis ...

  4. codevs 2541 幂运算（迭代加深搜索）

    /* 一开始想到了简单的深搜 维护当前可用的mi数组 然后回溯用哪个 不断更新新产生的mi 这样的问题是 由于mi不断产生 搜索规模扩大 不好 不好 下面是奇丑的WA掉的代码 做个反面教材 */ #i ...

  5. C#—委托分析

    1.简单委托示例 using System; using System.Collections.Generic; using System.Linq; using System.Text; names ...

  6. AmazeUI 模态框封装

    /** * 模态窗口 */ window.Modal = { tpls:{ alert:'<div class="am-modal am-modal-alert" tabin ...

  7. css.day01

    1.CSS 初步认识 web 标准 w3c 结构   xhtml    table  p  hr  br   td    img  a 表现   CSS CSS 最大的好处  就是让  结构和表现   ...

  8. leetcode修炼之路——383. Ransom Note

    题目是这样的 Given
 an 
arbitrary
 ransom
 note
 string 
and 
another 
string 
containing 
letters from
 a ...

  9. TCP连接的状态分析

    1.先来了解一下TCP连接建立与关闭过程中的各种状态: CLOSED:初始状态,表示没有任何连接.LISTEN:Server端的某个Socket正在监听来自远方的TCP端口的连接请求.SYN_SENT ...

  10. Windows Phone中使用Storyboard做类似 IOS 屏幕小白点的效果

    windows phone中做动画其实很方便的,可以使用Blend拖来拖去就做出一个简单的动画,下面做了一个 ios屏幕小白点的拖动效果,包括速度判断移动 使用Blend生成以下代码 <Stor ...