文档章节

HTML5 jQuery图片上传前预览功能

孟飞阳
 孟飞阳
发布于 2016/06/27 16:51
字数 342
阅读 511
收藏 1

码上生花,ECharts 作品展示赛正式启动!>>>

HTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,实现图片预览功能。请选择支持HTML API的浏览器,比如谷歌Chrome和火狐等。

<!DOCTYPE html>
<html>
<head>
<title>HTML5上传图片预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
</head>
<body>
<h3>请选择图片文件:JPG/GIF</h3>
<form name="form0" id="form0" >
<input type="file" name="file0" id="file0" multiple="multiple" /><br><img src="" id="img0" >
</form>
<script>	
$("#file0").change(function(){
	var objUrl = getObjectURL(this.files[0]) ;
	console.log("objUrl = "+objUrl) ;
	if (objUrl) {
		$("#img0").attr("src", objUrl) ;
	}
}) ;
//建立一個可存取到該file的url
function getObjectURL(file) {
	var url = null ; 
	if (window.createObjectURL!=undefined) { // basic
		url = window.createObjectURL(file) ;
	} else if (window.URL!=undefined) { // mozilla(firefox)
		url = window.URL.createObjectURL(file) ;
	} else if (window.webkitURL!=undefined) { // webkit or chrome
		url = window.webkitURL.createObjectURL(file) ;
	}
	return url ;
}
</script>
</body>
</html>

 

© 著作权归作者所有

孟飞阳

孟飞阳

粉丝 223
博文 1070
码字总数 570879
作品 5
朝阳
个人站长
私信 提问
加载中
请先登录后再评论。
分享8个超棒的基于HTML5和jQuery的开发教程

日期:2011/12/15 来源:GBin1.com HTML5 和jQuery组合目前对于web开发人员来说是强大的工具之一,使用这个组合能够帮助你扩展你设计的局限,实现一些非常绚丽及其强大的web应用或者网 站。尤...

gbin1
2011/12/21
3.5K
0
使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用

日期:2011/11/19 来源:GBin1.com 昨天我们介绍了一款HTML5文件上传的jQuery插件:jQuery HTML5 uploader ,今天我们将开发一个简单的叫upload center的图片上传程序,允许用户使用拖拽方式...

gbin1
2011/11/19
339
1
12 个必要的 jQuery 表单插件

Web表单是网站中很常见的Web组件,你用它来收集数据,用户的详细信息等。然而,现有的表单限制很多,功能比较简单,尽管有 HTML5 ,不幸的是,并非所有浏览器都支持它,所以现在我们可以使用...

红薯
2012/03/28
5.9K
8
8个超炫酷的jQuery相册插件欣赏

在网页中,相册应用十分常见,如果你经常逛一些社交网站,那么你应该会注意到很多各式各样的网页相册应用。今天我们要来分享一些最新收集的jQuery相册插件,这些精美的jQuery相册插件可以帮助...

html5tricks
2017/03/12
0
0
几款极好的 JavaScript 文件上传插件

jQuery File Uploader 这是最受欢迎的 jQuery 文件上传组件,支持批量上传,拖放上传,显示上传进度条以及校验功能。 支持预览图片、音频和视频,支持跨域上传和客户端图片缩放,支持的服务端...

hoojo
2013/09/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Git 安装

下载地址: https://pc.qq.com/detail/13/detail_22693.html https://git-scm.com/ 安装参考: https://git-scm.com/book/zh/v2/%E8%B5%B7%E6%AD%A5-%E5%AE%89%E8%A3%85-Git 获取Git安装程序......

osc_a7a1prn6
20分钟前
20
0
gin教程

Golang Gin 实战(十)| XML渲染 Golang Gin 实战(九)| JSONP跨域和劫持 Golang Gin 实战(八)| JSON渲染输出 Golang Gin 实战(七)| 分组路由源代码分析 Golang Gin 实战(六)| 获取F...

osc_slfjdpj6
22分钟前
14
0
Command and Query Responsibility Segregation (CQRS) pattern

Command and Query Responsibility Segregation (CQRS) pattern The Command and Query Responsibility Segregation (CQRS) pattern separates read and update operations for a data store......

osc_xah3duav
22分钟前
20
0
VMXNET3与E1000E与E1000的比较

详细信息请查看参考资料的原文,这里仅翻译一些要点。 VMware管理员在选择虚拟网卡的时候有两类选择, 仿真型虚拟网卡和超虚拟化型的虚拟网卡。具体如下: 仿真型(Emulated)虚拟网卡:好处...

osc_g96tdr1z
23分钟前
24
0
Implementing event-based communication between microservices (integration events)

https://docs.microsoft.com/en-us/dotnet/architecture/microservices/multi-container-microservice-net-applications/integration-event-based-microservice-communications#integration-......

osc_6t6cjs45
25分钟前
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部