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. 如何判断MSSQL数据库磁盘出现了瓶颈

    问大神石沫:如何判断MSSQL数据库磁盘出现了瓶颈? 石沫(A1):您好,您的问题非常好,SQL SERVER提供了很多关于I/O压力的性能计数器,请选择性能计算器PhysicalDisk(Logic ...

  2. Failed dependencies: 检查依赖性错误 解决方法

    centOs下: error: Failed dependencies: 检查依赖性错误 解决方法 刚才安装avast的linux版,结果出现了: [root@localhost /]# rpm -i ...

  3. 案例：利用累加器计算前N个学生的总成绩和平均成绩

    /* *录入N个学生的成绩,并求出这些学生的总成绩和平均成绩! * */ import java.util.Scanner; public class SumTest{ public static v ...

  4. MIUI6&7桌面角标开源代码简介

    MIUI6&7桌面角标开源代码简介 MIUI6&7上重新设计了桌面app图标的角标显示,基本规则如下: 一.基本介绍 1.默认的情况 当app 向通知栏发送了一条通知 (通知不带进度条 ...

  5. Gradle学习目录总结

    如果是你想干的事情,在别人看起来可能是很难的一件事,不过你自己很喜欢,你不会觉得很苦.我开始创业那会是28岁.对我来讲,我创业的目的不是为了自己当老板,我希望有一个平台有一个环境,我可以控制一些资源, ...

  6. [Android]如何创建一个View的分割线

    如何创建一个View的分割线,如上图 我们见介绍三种可以创建看起来很不错的view的分割线,如在button之间添加分割线. 这个例子是将为LinearLayout内的三个Button间添加分割线. ...

  7. python之 sys.exit() os._exit() exit() quit()的简单使用

    python之sys.exit() os._exit() exit() quit()的简单使用 1>sys.exit() >>> import sys>>> ...

  8. surfaceView和Camera配合进行摄像头的预览

    首先是Camera类,在5.0上已经被废弃,不推荐使用但还是支持的.最新的是Camera2类,我还没有研究,据说用法完全不一样,反正也是一个坑跳入另外一个坑. 上面是简介和需要的权限,记得加上权限. ...

  9. C#解leetcode 18. 4Sum

    Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = tar ...

  10. Asp.net Core 部署到Azure.cn的一个小问题

    前一段尝试在azure.cn上部署Aps.net Core未成功,报503错误!在网上查到是Azure.cn的问题,未能完美支持Asp.net Core! Asp.net Core发表正式版了,又尝试 ...