URL图片预览（createObjectURL）
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）的更多相关文章
- JS魔法堂之实战：纯前端的图片预览
一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...
- html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器
以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...
- js 图片预览
图片预览 $('#pac_recipe').change(function() { var imgsrc = ''; ]) { //chrome firefox imgsrc = window.URL ...
- 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览
html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...
- js本地图片预览代码兼容所有浏览器
html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...
- javascript 实现图片预览（未上传到服务器端）
1,图片预览 越来越多的浏览器为了安全,都不能获得文件的,全路径,实现图片预览实现起来有点麻烦.有人选择复制图片到服务器的某个路径下,然后从服务器端找到路径,实现预览.但这不是最佳实现方案,如果用户一 ...
- js图片预览插件，不涉及上传
小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...
- 通过file文件选择图片预览功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- input file样式修改，图片预览删除功能
本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这 ...
随机推荐
- UML中的图
用例图.类图.包图.顺序图.协作图.状态图.活动图.构件图.部署图等 1.用例图 显示多个外部参与者以及他们与系统提供的用例之间的连接.用例是系统中的一个可以描述参与者与系统之间交互作用功能单元.用例 ...
- TabBarController创建及使用方法简介
TabBarController创建及使用方法简介 大致讲解一下TabBarController的创建过程: 首先,我们需要一些视图,如创建UIControllerView类型的view1,view2 ...
- stl_alloc.h
/* * Copyright (c) 1996-1997 * Silicon Graphics Computer Systems, Inc. * * Permission to use, copy, ...
- Nginx报错：Sorry, the page you are looking for is currently unavailable. Please try again later.
查看了进程, nginx, php-fpm都在运行, 排除程序错误, 那么就是配置的问题了. 一个可能的错误, 是由于配置中的 fastcgi_pass 配置错了 错误的配置如下 server { l ...
- Linux常用操作练习
Linux常用操作练习 练习一:安装CentOS 1.设置为1G内存(才有图形界面).10G硬盘 2.分给交换分区2G(4G一下2G,8G-32G分4G-8G) 练习二:安装CentOS迷你版 1.安 ...
- ASP.NET 日志
ASP.NET5已经内建集成了日志系统,你也可以用第三方的日志框架. 1. 在你的应用程序中实现日志 在Startup.cs文件中,在Configure里可以把ILoggerFactory注入进去,然 ...
- .net中XML的创建01（传统方法）
XML传统的创建: 传统的创建主要是依据XmlDocument的对象展开的,通过XmlDocument对象可以创建元素(XmlElement).属性(XmlAttribute)以及文本节点(Creat ...
- Hive学习之四 《Hive分区表场景案例应用案例，企业日志加载》 详解
文件的加载,只需要三步就够了,废话不多说,来直接的吧. 一.建表 话不多说,直接开始. 建表,对于日志文件来说,最后有分区,在此案例中,对年月日和小时进行了分区. 建表tracktest_log,分隔 ...
- 【USACO 3.3.1】骑马修栅栏
[描述] Farmer John每年有很多栅栏要修理.他总是骑着马穿过每一个栅栏并修复它破损的地方. John是一个与其他农民一样懒的人.他讨厌骑马,因此从来不两次经过一个栅栏.你必须编一个程序,读入 ...
- input, textarea,监听输入事件
IE使用'propertychange'事件监听,其它浏览器使用'input'事件测试了IE7-10, Chrome, FF, 输入没有问题.♥但在IE9下, 删除, 回退, Ctrl+X 没有 ...