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写的比较粗糙,对于想要精细表现这 ...
随机推荐
- 在VisualStudio 2012中通过SmallSharp压缩js及修改web.config
在项目中加入一个targets文件,取名my.build.targets 在targets文件中加入内容: <?xml version="1.0" encoding=&quo ...
- 4道过滤菜鸟的iOS面试题
网上已经有很多针对各种知识点的面试题,面试时有些人未必真正理解也能通过背题看上去很懂.我自己总结了4道面试题,好快速的判断这个人是否是一个合格的工程师,欢迎大家点评. 1.struct和class的区 ...
- codevs 1036 商务旅行 （倍增LCA）
/* 在我还不知道LCA之前 暴力跑的SPFA 70分 三个点TLE */ #include<iostream> #include<cstdio> #include<cs ...
- sql的一些小东西
1.sa账户密码丢失. 先用wiondows验证登陆,然后新建查询 “ ALTER LOGIN [sa] WITH PASSWORD = N'NewPassword' ”
- jquery live hover事件的替代写法
HTML中的hover行为通常在样式中定义,利用jquery实现此效果有两种情况. 第一种是常见的针对页面中静态的元素,以改变元素样式中的border-color为例,写法如下: $(function ...
- input输入过滤js
html部分使用方式 <input onkeyup="usrNameSet(this)" /> 其它的自己可以随便调用 Js部分 //只能输入数字.字母.小数点.汉字 ...
- flash与php 交互（as传参给php）
一种 不传参 直接读取PHP文件 btn.addEventListener(MouseEvent.CLICK,loadTxt);function loadTxt(evt:MouseEvent):voi ...
- java mail 使用 gmail smtp 发送邮件
smtp 服务器:smtp.gmail.com 使用ssl的端口:465 用户名:username@gmail.com 密码:password** 基本配置没有问题,关键在于Google对安全性要求非 ...
- iOS开发网络资源整理-持续更新
本文记录iOS开发相关的网络社区和博客 1.objc中国 网址:http://objccn.io 简介:onevcat创建,项目的成立源于国内 Objective-C 社区对 objc.io 的翻译活 ...
- 使用POI进行Excel操作的总结一——创建Workbook，Sheet，Row以及Cell
前段时间,看在其他的网站上给出Excel文档的导入与导出操作,感觉很酷的样子,所以就学习了一下如何使用POI进行Excel的操作,现在对之前的学习过程进行一个总结. 一.现在普遍使用的Excel文档有 ...