3.4 头像点击上传3.4.1 jsp3.4.1.1 头像修改表单<%-- 头像修改 form start --%><form action="${pageContext.request.contextPath}/user/headImg" method="post" enctype="multipart/form-data" id="userHeadImgForm"> <input type="file" name="userHeaderImg" id="userHeaderPic" style="display: none"/></form><%-- 头像修改 form end --%>3.4.1.2 头像展示<%-- 头像 展示 start --%><h3> <a style="margin-left: 130px"> <img style=" width: 50px;height: 50px" id="userHeaderImg" src=https://www.huyubaike.com/biancheng/"${pageContext.request.contextPath}/${sessionScope.loginUser.uhead}"/> 3.4.1.3 点击头像触发 图片选择input 头像选择//============ 头像更换 start ================$(function (){ // 点击头像图片，触发文件预点击 $("#userHeaderImg").click(function (){ $("#userHeaderPic").click(); }); // 当文件域内容改变，实现头像预览 $("#userHeaderPic").change(function () { // 获取上传文件对象 var file = $(this)[0].files[0]; // 判断类型 var imageType = /^image\//; if (file === undefined || !imageType.test(file.type)) { alert("请选择图片！"); return; } // 判断大小 if (file.size > 512000) { alert("图片大小不能超过500K！"); return; } // 读取文件URL，预览文件 var reader = new FileReader(); // 读取文件 reader.readAsDataURL(file); // 阅读文件完成后触发的事件 reader.onload = function () { // 读取的URL结果：this.result $("#userHeaderImg").attr("src", this.result); // alert("图片上传"); $("#userHeadImgForm").submit(); }; // TODO 还可以不预览，直接异步ajax发送请求到后台，上传文件，然后返回页面显示头像，并将图片的路径防止页面隐藏域，提交表单记录头像的地址 });//============ 头像更换 end ================
经验总结扩展阅读
- 世界上的五大人种
- 佐助五影会谈第几集
- 动森五一活动迷宫攻略
- 支付宝蚂蚁庄园10月28日答提分享
- 主力建仓时的五大特征是什么
- 四大名山和五岳在哪
- 支付宝蚂蚁庄园10月28日答案是什么
- 如何删除支付宝的帐户明细
- 王者荣耀五杀限制时间是多久
- 如何制作梅干菜扣肉烧饼