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

本文链接：https://blog.csdn.net/qiuyan_f/article/details/79218130

<!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>
	<form id='form1'>

		<input id="upload" name="file" accept="image/*" type="file" style="display: none;" />
		<br>
		<img id="pic" src="">    </form>

	<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"/>

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

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