码迷,mamicode.com
首页 > 编程语言 > 详细

javascript file上传并显示图片

时间:2015-05-04 09:54:50      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<style>
.btn{
	display: block;
	background:green;
	color:#fff;
	text-decoration:none;
	padding:5px;
	float: left;
	margin:0 5px;
}
</style>
<body>
	
	<label for="up">
		<input type="file" id="up" style="display:none;">
		<span class="btn">选择图片</span>
	</label>
	<a href="javascript:;" class="btn">上传</a>

	<img src="" id="pic">

</body>
</html>
<script>
	function $( id ){
		return document.getElementById(id);
	}
	//改变的时候才获取内容
	$(‘up‘).onchange = function(){
		if ( this.files != undefined ) {
			var url = window.webkitURL.createObjectURL( this.files[0] );
			$(‘pic‘).src = url;
		}
	}
</script>

  

javascript file上传并显示图片

标签:

原文地址:http://www.cnblogs.com/zion0707/p/4475403.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!