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写的比较粗糙,对于想要精细表现这 ...
随机推荐
- HTML中常见的各种位置距离以及dom中的坐标讨论
最近在学习JavaScript,特意买了一本犀牛角书来看看,尼玛一千多页,看的我头昏脑涨,翻到DOM这章节,突然记起平常在使用DOM时,碰到了好多的这个dom里面的各种宽度,高度,特意在此写一写,写的 ...
- C# 读取XML文件示例
有关XML文件编写规范,请参考:http://www.w3school.com.cn/xml/index.aspXML内容如下(文件名为:Information.xml):浏览器显示: <?xm ...
- Java基础知识强化之IO流笔记19:FileOutputStream的三个write方法
1. FileOutputStream的三个write方法: void write(byte[] buffer) Writes the entire contents of th ...
- CentOS7搭建SAMBA服务器实现与WIN10匿名共享文件
1.安装SAMBA yum -y install samba samba-client samba-common 2.修改文件打开数 vi /etc/security/limits.conf 最后添加 ...
- spring 读取properties的两种方法
一:直接使用context命名空间 <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi= ...
- 不用jquery等框架实现ajax无刷新登录
<script type="text/javascript"> window.onload = function () { document.getElementByI ...
- Android中px、dp、sp的区别
px: 即像素,1px代表屏幕上一个物理的像素点: px单位不被建议使用,因为同样100px的图片,在不同手机上显示的实际大小可能不同,如下图所示(图片来自android developer guid ...
- MySql Connector/Net Mysql like 搜索中文的问题(c#和asp.net连接mysql)
Connector/Net 6.9.8 选择.net/mono即可,不需要安装. 将对应版本的MySql.Data.dll复制到bin目录下即可使用 http://dev.mysql.com/down ...
- 创建dblink遇到一系列问题
创建dblink遇到一系列问题,有时间 把问题整理一下
- WPF实现摄像头镜像翻转
之前的项目需要镜像翻转摄像头视频,使用Aforge.Net来处理视频. 一开始考虑直接从Aforge.Net读取没一帧视频图片,然后复制给WPF的Image控件,这种方法基本很卡,所以放弃了. 考虑到 ...