提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

HTML5 图片上传预览（调用摄像头、文件）demo效果示例（整理）

文件上传html5 图片 示例 调用 效果 整理
2023-09-14 09:04:05 时间 
<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		<meta name="author" content="EdieLei" />
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport">
		<title>HTML5 图片上传预览</title>
		<style>
			#photo {
				width: 100px;
				height: 100px;
				margin: auto;
				margin-top: 100px;
				background: #cfeab2;
				border-radius: 100px;
			}

			#photo img {
				width: 100px;
				height: 100px;
				border-radius: 50px;
			}
		</style>
		<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

		<script type="text/javascript">
			$(function() {
				$('#img').change(function() {
					var file = this.files[0];
					var r = new FileReader();
					r.readAsDataURL(file);
					$(r).load(function() {
						$('#photo').html('<img src="' + this.result + '" alt="" />');
					})
				})
			})
		</script>
	</head>
	<body>
		<h3>HTML5图片上传预览</h3>
		<input id="img" type="file" accept="image/*" />
		<div id="photo"></div>
	</body>
</html>

 

相关文章