js上传头像

最新推荐文章于 2025-02-23 16:00:50 发布
QSWQSWQSWQSWQSW
最新推荐文章于 2025-02-23 16:00:50 发布
阅读量1k
点赞数
分类专栏： IT js css html 文章标签： js上传头像
本文链接：https://blog.youkuaiyun.com/qq_43209114/article/details/95345754
版权
IT 同时被 3 个专栏收录
83 篇文章
订阅专栏
46 篇文章
订阅专栏
html
41 篇文章
订阅专栏
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
		<title></title>
		<script>
			window.onload = function() {
				getRem(750, 100)
			};
			window.onresize = function() {
				getRem(750, 100)
			};

			function getRem(pwidth, prem) {
				var html = document.getElementsByTagName("html")[0];
				var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
				html.style.fontSize = oWidth / pwidth * prem + "px";
			}
		</script>
		<style type="text/css">
			button {
				width: 3rem;
				height: 1rem;
				font-size: 0.3rem;
			}
			/*半透明膜背景*/
			
			.shareWay {
				background: #FFFFFF;
				display: flex;
				flex-direction: column;
				height: 4rem;
				/* justify-content: center; */
				align-items: center;
				padding-top: 0.88rem;
			}
			
			.am-share2 {
				font-size: 14px;
				border-radius: 0;
				bottom: 0;
				left: 0;
				position: fixed;
				text-align: center;
				-webkit-transform: translateX(100%);
				-ms-transform: translateX(100%);
				transform: translateY(100%);
				-webkit-transition: -webkit-transform 300ms;
				transition: transform 300ms;
				width: 100%;
				z-index: 99999999;
				background: #fff;
			}
			
			.am-modal-active {
				-webkit-transform: translateX(0);
				-ms-transform: translateX(0);
				transform: translateX(0)
			}
			
			.am-share-title {
				background-color: #f8f8f8;
				border-bottom: 1px solid #fff;
				border-top-left-radius: 2px;
				border-top-right-radius: 2px;
				color: #555;
				font-weight: 400;
				margin: 0 10px;
				padding: 10px 0 0;
				text-align: center;
			}
			
			.am-share-title::after {
				border-bottom: 1px solid #dfdfdf;
				content: "";
				display: block;
				height: 0;
				margin-top: 10px;
				width: 100%;
			}
			
			.am-share-footer {
				margin: 10px;
			}
			
			.am-share-footer .share_btn {
				color: #555;
				display: block;
				width: 100%;
				background-color: #e6e6e6;
				border: 1px solid #e6e6e6;
				border-radius: 0;
				cursor: pointer;
				font-size: 16px;
				font-weight: 400;
				line-height: 1.2;
				padding: 0.625em 0;
				text-align: center;
				transition: background-color 300ms ease-out 0s, border-color 300ms ease-out 0s;
				white-space: nowrap;
				font-family: "微软雅黑";
			}
			
			.am-share-sns {
				background-color: #f8f8f8;
				border-radius: 0 0 2px 2px;
				margin: 0 10px;
				padding-top: 15px;
				height: auto;
				zoom: 1;
				overflow: auto;
			}
			
			.am-share-sns li {
				margin-bottom: 15px;
				display: block;
				float: left;
				height: auto;
				width: 25%;
			}
			
			.am-share-sns a {
				color: #555;
				display: block;
				text-decoration: none;
			}
			
			.am-share-sns span {
				display: block;
			}
			
			.am-share-sns li i {
				background-position: center 50%;
				background-repeat: no-repeat;
				background-size: 36px 36px;
				background-color: #ccc;
				color: #fff;
				display: inline-block;
				font-size: 18px;
				height: 36px;
				line-height: 36px;
				margin-bottom: 5px;
				width: 36px;
			}
			
			.am-share-sns .share-icon-weibo {
				background-image: url();
			}
			
			.sharebg {
				background-color: rgba(0, 0, 0, 0.68);
				bottom: 0;
				height: 100%;
				left: 0;
				opacity: 0;
				position: fixed;
				right: 0;
				top: 0;
				width: 100%;
				z-index: 999999;
				display: none;
			}
			
			.sharebg-active {
				opacity: 1;
				display: block;
			}
			
			.TakingPictures,
			.ChoosePhoto,
			.cancel {
				width: 6.9rem;
				height: 0.88rem;
				line-height: 0.88rem;
				text-align: center;
				border-radius: 0.44rem;
				border: 1px solid rgba(0, 0, 0, 1);
				margin-bottom: 0.3rem;
				font-size: 0.36rem;
			}
			
			.paizhao {
				position: absolute;
				top: 0.9rem;
				height: 0.9rem;
				opacity: 0;
			}
		</style>
	</head>

	<body>
		<p>
			<button onclick="toshare()">点我，可以是个图片奥</button>
		</p>

		<!-- 半透膜背景 -->
		<div class="am-share2">
			<div class="shareWay">
				<div class="TakingPictures" style="font-weight: bold;">从相册选择</div>
				<div class="cancel share_btn">
					取消
				</div>
				<input type="file" accept="image/*;" id="file" class="paizhao">

			</div>
		</div>
	</body>
	<script type="text/javascript">
		// 弹出遮罩层
		$(".share").click(function() {
			$("transition").css("display", "block");
		})
		$(".cancel").click(function() {
			$("transition").css("display", "none");
		})

		function toshare() {
			$(".am-share2").addClass("am-modal-active");
			if($(".sharebg").length > 0) {
				$(".sharebg").addClass("sharebg-active");
			} else {
				$("body").append('<div class="sharebg"></div>');
				$(".sharebg").addClass("sharebg-active");
			}
			$(".sharebg-active,.share_btn").click(function() {
				$(".am-share2").removeClass("am-modal-active");
				setTimeout(function() {
					$(".sharebg-active").removeClass("sharebg-active");
					$(".sharebg").remove();
				}, 300);
			});

		}

		//  上传头像
		document.getElementById('file').addEventListener('change', function() {
			var reader = new FileReader();
			reader.onload = function(e) {
				compress(this.result);
			};
			reader.readAsDataURL(this.files[0]);
		}, false);

		var compress = function(res) {
			var img = new Image(),
				maxH = 160;
			img.onload = function() {
				var cvs = document.createElement('canvas'),
					ctx = cvs.getContext('2d');
				if(img.height > maxH) {
					img.width *= maxH / img.height;
					img.height = maxH;
				}
				cvs.width = img.width;
				cvs.height = img.height;
				ctx.clearRect(0, 0, cvs.width, cvs.height);
				ctx.drawImage(img, 0, 0, img.width, img.height);
				var dataUrl = cvs.toDataURL('image/jpeg', 0.6);
				// 上传略
				console.log(dataUrl)
				$.ajax({
					type: "post",
					data: {
						file: dataUrl
					},
					url: "{:U('User/uploadHead')}",
					dataType: 'json',
					success: function(data) {
						console.log(data)
						let $info = data.info
						if(data.status == 1) {
							$(".photo").attr('src', dataUrl)
							window.location.reload()
						} else if(data.status == 2) {
							// layer.open({
							//     type: 1,
							//     anim: 'up',
							//     content: $info,
							// });
							alert($info)
							$(".sharebg-active").css('display', 'none')
							$(".am-share2").css('display', 'none')
						}
					}
				});
			}
			img.src = res;
		}
	</script>

</html>