头像上传 模拟（个人信息修改 有头像图片上传 一般 用form 表单提交）

时间：2023-01-19 21:07:04
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#pic {
				width: 100px;
				height: 100px;
				border-radius: 50%;
				cursor: pointer;
				
			}
		</style>
	</head>

	<body>
		
		<input id="upload" name="file" accept="image/*" type="file" style="display: none;"  /><br>
		<img id="pic" src="">
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$("#pic").click(function() {
					$("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
					$("#upload").on("change", function() {
						var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
						if(objUrl) {
							$("#pic").attr("src", objUrl); //将图片路径存入src中，显示出图片
						}
					});
				});
			});

			//建立一個可存取到該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>


var oData = new FormData(document.forms.namedItem("form1"));//ajax  form获取提交   form1 为form id;
//注意  form 提交  时 input 的name 命名 要与后台接的字段一样  隐藏元素  用type ="hidden"  存储

<input type="hidden" name="userId" id="userId"/>

标签：

相关文章