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. CSDN Markdown简明教程5-高速上手

    0.文件夹 文件夹 前言 CSDN Markdown特点 CSDN Markdown高速上手 1 使用快捷键 粗体斜体 引用 链接 高亮代码块 图片 标题 列表 切割线 撤销反复 2 使用离线写作 3 ...

  2. [转] 剖析 epoll ET/LT 触发方式的性能差异误解（定性分析）

    http://blog.chinaunix.net/uid-17299695-id-3059078.html PS:Select和Poll都是水平触发,epoll默认也是水平触发 ET模式仅当状态发生 ...

  3. TCP的封包与拆包

    对于基于TCP开发的通讯程序,有个很重要的问题需要解决,就是封包和拆包. 一.为什么基于TCP的通讯程序需要进行封包和拆包. TCP是个"流"协议,所谓流,就是没有界限的一串数据. ...

  4. AC自动机学习笔记

    AC自动机 ----多个模板的字符串匹配 字典树Trie加上失配边构成 插入操作:ac.insert(p[i],i);构造失配函数:ac.getFail();计算文本串T中每个模板串的匹配数:ac.f ...

  5. C#解leetcode 53.Maximum Subarray

    Find the contiguous subarray within an array (containing at least one number) which has the largest ...

  6. Windows 2008 server R2安装.NET Framework4时提示“灾难性故障”解决

    在安装行环境.NET Framework 4时无法安装,提示“灾难性故障”.服务器的操作系统是windows  server 2008 R2. 查看系统日志时显示“无法安装 Windows 更新 &q ...

  7. maven自动部署到tomcat的问题

    最近需要使用Maven将项目自动部署到Tomcat,在网络上也查找了很多文章,内容大同小异,今天打算在这里给自己做一个小总结 参考网址:http://blog.csdn.net/dilaomimi/a ...

  8. 七.生成n位随机字符串

    --1.借助newid() go --创建视图(因为在函数中无法直接使用newid()) create view vnewid as select newid() N'MacoId'; go --创建 ...

  9. ORACLE调度之基于事件的调度（二）【weber出品】

    一.回顾 调度分基于时间的调度和基于事件的调度. 稍微复习一下前面的只是请浏览:<ORACLE调度之基于时间的调度(一)[weber出品]> 二.知识补充 1.队列:一种数据结构,就像一根 ...

  10. react服务端渲染（同构）

    学习react也有一段时间了,使用react后首页渲染的速度与seo一直不理想.打算研究一下react神奇服务端渲染. react服务端渲染只能使用nodejs做服务端语言实现前后端同构,在后台对re ...