选择图片代码

最新推荐文章于 2024-05-16 06:13:35 发布

dh798618067

最新推荐文章于 2024-05-16 06:13:35 发布

阅读量625

点赞数

分类专栏：公共文章标签：图片 html javascript

本文链接：https://blog.csdn.net/dh798618067/article/details/67634769

版权

公共专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script type="text/javascript" src="js/mui.min.js"></script>
		<link rel="stylesheet" href="css/mui.min.css" />
		<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<style>
			.paizhao {
				width: 100%;
				height: 40px;
				padding: 0px 20px;
				box-sizing: border-box;
			}
			
			.paizhao>div {
				width: 100%;
				height: 100%;
				border-radius: 5px;
				background: red;
				text-align: center;
				line-height: 40px;
				color: white;
				margin-top: 20px;
				position: relative;
			}
			
			.fimg1 {
				position: absolute;
				left: 0px;
				top: 20px;
				background: black;
				display: inline-block;
				width: 100%;
				height: 40px;
				font-size: 0px;
				border: none;
				outline: none;
				opacity: 0;
			}
			.xian{
				width: 100px;
				height:100px ;
				margin: auto;
				margin-top: 20px;
				border: 1px solid black;
			}
			.xian>img{
				
			}
		</style>
	</head>

	<body>
		<div class="paizhao">
			<div class="photo" id="paizha">拍照</div>
			<input id="uploadImage1" type="file" name="photoimage" class="fimg1" />
		</div>
		<div class="xian" id="zhao">
		</div>
		<script>
				$("#uploadImage1").on("change", function() {
					var files = !!this.files ? this.files : [];
					if (!files.length || !window.FileReader) return;
					if (/^image/.test(files[0].type)) {
						var reader = new FileReader();
						reader.readAsDataURL(files[0]);
						reader.onloadend = function() {
							$("#zhao").css({
								"background-image": "url(" + this.result + ")",
								"background-size":"100% "
							});
						}
					}
				});
		</script>

	</body>

</html>

dh798618067

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选择图片代码

mui.init(); .paizhao { width: 100%; height: 40px; padding: 0px 20px; box-sizing: border-box; } .paizhao>div { width: 100%; height: 100%; border-radius: 5
复制链接

扫一扫

专栏目录