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写的比较粗糙,对于想要精细表现这 ...
随机推荐
- Android（java）学习笔记238：多媒体之图片画画板案例
1.首先我们编写布局文件activity_main.xml如下: <RelativeLayout xmlns:android="http://schemas.android.com/a ...
- Linux开发工具之gcc
一.gcc入门(上) 1.gcc相关概念 gcc(GNU C Compiler)编译器,最初支持C语言,现已支持C.C++.Java.Pascal.Ada.COBOL语言等:支持多种硬件平台: ...
- NYOJ2括号配对问题
括号配对是最基本的栈的问题,它是栈入门的经典题目,思路是,如果是左括号直接进栈,如果是右括号,这时就要比较栈顶的元素与他是否匹配,如果匹配则出栈,否则进栈,下面是代码的实现: #include < ...
- 生成PDF并下载。
例子是生成一个pdf格式的证书: //创建Document Document document = null; //为该Document创建一个Writer实例 PdfWriter writer = ...
- 访问的是A网址，但是跳转B网址的内容，地址栏还是A网址
最近家里宽带续费,是用小区小广告的宽带,打开http://download.csdn.net/ 或其他一些设计下载.购物商城或威客网址进不去 提示 经过网上大量搜索和请教,都说是以下几点引起的 1.网 ...
- maven update 以后报错。
java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException: Failed to start com ...
- iOS： TableView如何刷新指定的cell 或section
//一个section刷新 NSIndexSet *indexSet=[[NSIndexSet alloc]initWithIndex:2]; [tableview reloadSections:in ...
- UIScrollView设置了contentSize后还是没办法滚动?
1.最常见的原因是 contentSize 这个属性,比uiscrollview的frame要小, 无需滚动, 自然就滚动不了. scrollenabled 这个属性,标识着是否允许滚动,要言设成ye ...
- 跳转到QQ聊天界面和QQ群界面
// uin=2977046873为QQ号 NSString *urlString = @"mqq://im/chat?chat_type=wpa&uin=2977046873&am ...
- CompareValidator ASP控件
定义和用法 CompareValidator 控件用于将由用户输入到输入控件的值与输入到其他输入控件的值或常数值进行比较. 注释:如果输入控件为空,则不会调用任何验证函数,并且验证将成功.使用 Req ...