<!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的urlfunction getObjectURL(file) {var url = null;if(window.createObjectURL != undefined) { // basicurl = window.createObjectURL(file);} else if(window.URL != undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file);} else if(window.webkitURL != undefined) { // webkit or chromeurl = 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"/>