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. JAVA复习2 JAVA开发环境配置

    我想写的东西主要是JAVA编程里的难点和易混淆点,所以在这里给大家提供一些经典的博客地址或网址.. W3C JAVA教程  JAVA开发环境配置篇: http://www.w3cschool.cc/j ...

  2. [转] Maven镜像配置

    参考:许晓斌的<Maven实战> 镜像是为了提供更快的服务 如图:X就认为是Y的一个镜像. 编辑settings.xml配置中央仓库镜像: <settings> ... < ...

  3. [转] javascript对数组的操作

    javascript数组操作大全,数组方法总汇 1. shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = ...

  4. 几句话实现导航栏透明渐变 – iOS

    首先我们来看下效果 一开始当我们什么只设置了一张图片作为它的头部视图的时候,它是这样的 首当其冲的,我们先得把导航栏弄透明 那么我们首先得知道,设置navigationBar的BackgroundCo ...

  5. Android Studio 快捷键（转）

    Android Studio 快捷键 操作 Mac OSX Win/Linux 注释代码(//) Cmd + / Ctrl + / 注释代码(/**/) Cmd + Option + / Ctrl + ...

  6. Android（java）学习笔记219：开发一个多界面的应用程序之两种意图

    1.两种意图: (1)显式意图: 在代码里面用intent设置要开启Activity的字节码.class文件: (2)隐式意图: Android(java)学习笔记218:开发一个多界面的应用程序之人 ...

  7. Linux编程之定制带级别的log

    我的开发组长曾经说过这么一段话"一个优秀的程序员不在于他写代码有多快,也不在于他能不能实现这个模块的功能,要实现业务实现功能谁不会啊,重要的是他的解决能力,也就说当程序出现错误时你能不能够快 ...

  8. angular细节整理

    记录angularjs中比较容易忽视的问题 1.关于动态生成ui-sref的问题 ui-route中ui-sref中的路径无法动态生成的,如果要实现动态生成ui-sref路径,可以使用$state.g ...

  9. photoshop mac版下载及破解

    1.下载 直接百度photoshop,就可以找到百度的下载源: 2.破解 http://zhidao.baidu.com/question/581955095.html

  10. 使用ol，添加图书销售排行榜

    如果想在网页中展示有前后顺序的信息列表,怎么办呢?如,当当网上的书籍热卖排行榜,如下图所示. 这类信息展示就可以使用<ol>标签来制作有序列表来展示. 语法: <ol> < ...