当前位置： 首页 > news >正文

0422--在网页中上传头像（图片）

news 来源：原创 2025/4/24 12:53:14

思路：

在add.html中添加上传文件的控件---【点击头像旁的选择文件后，图片不是立即上传到数据库，而是保存在服务器中的一个文件夹里，点击添加后再上传到数据库；选择文件不用click绑定，用change绑定，当值改变时事件才会触发；图片是以二进制字节流形式上传至服务器的，所以需要对数据进行序列化（把信息转成可以传输的过程）；jquary（用$的）传的是jdom元素，原生的JavaScript传的是dom元素；数据库存的是图片上传后的重命名】---add.js添加图片上传，将数据表单序列化传给后端【后端selvet已提供】---将图片以缩略图展示--j将图片展示到表格中--修改模块中图片的回显与修改

Form表单： 

HTML 表单(<form>)是网页中用于收集用户输入的重要元素，它允许用户通过文本框、下拉菜单、单选按钮、复选框等控件提交数据。

主要属性：

action: 指定表单数据提交的URL  --和submit按钮搭配使用（触发表单提交的控件）

method: 指定HTTP方法(通常为"get"或"post")

enctype: 指定数据编码方式(重要用于文件上传)

想要让表单识别到数据要加一个name属性。

jdom和dom的转换： 

jdom--->dom: jdom[0] 

dom--->jdom:$(dom) 

理解new FormData（）和表单序列化 

DOM（Document Object Model，文档对象模型）元素是指HTML文档中的各个组成部分在JavaScript中的对象表示。表单DOM元素特指HTML文档中的<form>标签及其内部表单控件在JavaScript中的对象形式。

new FormData() 是 JavaScript 中用于处理表单数据的原生 API，它可以将 HTML 表单中的所有数据序列化为键值对形式，便于通过 AJAX 或其他方式发送到服务器。

传入表单元素后，FormData 会自动收集该表单内所有带有 name 属性的表单控件值。

将表单序列化为 FormData 对象后，可以：通过AJAX发送/添加额外数据/处理复杂数据

图片存入数据库中的值： 

 imgurl是数据库中存入的值

 student.html

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/jquery.cookie.min.js"></script>
<script src="js/student.js" defer></script>
<style type="text/css">.page{display:flex;margin-left:-40px;}.page li{list-style:none;border:1px solid #444;font-size:14px;padding:5px;cursor:pointer;margin-right:5px;}.page li.current{background:#444;color:#fff;}
</style></head>
<body>
<input type='button' value='添加'' class='add'>
<input type='button' value='批量删除' class='deteleMore'><table border='1'><thead><tr><th><input type='checkbox' class='checkAll'></th><th>id</th><th>name</th><th>age</th><th>sex</th><th>img</th><th>操作</th></tr></thead><tbody></tbody></table><!--<div class='addModel'>姓名:<input type='text' class='addName'><br>性别:<input type='text' class='addSex'><br>年龄:<input type='text' class='addAge'><br><input type='button' value="添加" class='addBtn'><input type='button' value="取消" class='back'></div>  --><ul class="page"></ul></body>
</html>

 student.js

 

//查找学生
var page=1
var pageSize=6
var loadData=function(){$.ajax({url:"SearchServlett",type:"get",data:{page,pageSize},success:function(value){var arr = value.data$("tbody").empty()for(var i=0;i<arr.length;i++){$("tbody").append("<tr>"+"<th><input type='checkbox' class='delitem' index='"+arr[i].id+"'></th>"+"<td>"+arr[i].id+"</td>"+"<td>"+arr[i].name+"</td>"+"<td>"+arr[i].age+"</td>"+"<td>"+arr[i].sex+"</td>"+"<td><img src='upload/"+arr[i].imgurl+"' width='100' height='70'></td>"+"<td><input type='button' value='修改 ' class='update' index='"+arr[i].id+"'>  <input type='button' value='删除'  class='delete' index='"+arr[i].id+"'> </td>"+"</tr>")}},error:function(){alert("出错啦！")},})
}
loadData()
//加载页码
$.ajax({url:"GetCountServlet",type:"get",success:function(value){$(".page").append("<li class='first'>首页</li>")$(".page").append("<li class='prev'>上一页</li>")for(var i=0;i<Math.ceil(value.num/pageSize);i++){if(i==0){$(".page").append("<li class='current item'>"+(i+1)+"</li>")}else{$(".page").append("<li class='item'>"+(i+1)+"</li>")}}$(".page").append("<li class='next'>下一页</li>")$(".page").append("<li class='last'>尾页</li>")},error:function(){alert("出错啦！")},
})
//任意页码切换
$(".page").on("click",".item",function(){//数据切换page=$(this).text()loadData()//样式切换$(this).addClass("current")$(this).siblings().removeClass("current")
})
//首页
$(".page").on("click",".first",function(){//数据切换page=1loadData()//样式切换$(".item").removeClass("current")$(".item").first().addClass("current")
})
//尾页
$(".page").on("click",".last",function(){//数据切换page=$(".item").lengthloadData()//样式切换$(".item").removeClass("current")$(".item").last().addClass("current")
})//上一页切换
$(".page").on("click",".prev",function(){if(page==1){alert("已经是第一页啦！")return}//数据切换page--loadData()//样式切换//.eq() 方法用于从匹配的元素集合中获取指定索引位置的元素$(".item").removeClass("current")$(".item").eq(page-1).addClass("current")
})//下一页切换
$(".page").on("click",".next",function(){if(page==$(".item").length){alert("已经是最后一页啦")return}//数据切换page++loadData()//样式切换$(".item").removeClass("current")$(".item").eq(page-1).addClass("current")})//批量删除
$(".deteleMore").on("click",function(){// 初始化一个空字符串，用于存储选中的id（格式如："1,2,3"）var ids="";//$(".delItem:checked")选择所有 被勾选的复选框（class为 delItem 且状态为 checked 的元素）//循环拿到index的值，// 遍历所有被选中的复选框for(var i=0;i<=$(".delitem:checked").length-1;i++){// 如果是最后一个选中的元素，不加逗号if(i==$(".delitem:checked").length-1){ids+=$(".delitem:checked").eq(i).attr("index")}else{ids+=$(".delitem:checked").eq(i).attr("index")+","}}if(ids.length==0){alert("请至少删除一项")return }//弹出确认对话框，防止误操作。if(confirm("确定删除？")){$.ajax({url:"DeteleMoreServlet",type:"post",data:{ids},success:function(value){alert(value)location.reload()},error:function(){alert("出错啦")}})}else{alert("未执行删除操作")}
})
//全选
$(".checkAll").on("click",function(){//.prop()	DOM元素的当前属性（property）	动态值（如 checked, disabled, selected）//.attr()	HTML标签的原始属性（attribute）	静态值（如 id, class, data-*）	检查全选复选框（class="checkAll"）是否被勾选if($(".checkAll").prop("checked")){// // 如果全选按钮被勾选，将所有单项复选框（class="delItem"）设置为勾选状态$(".delitem").prop("checked",true)}else{// // 如果全选按钮取消勾选，将所有单项复选框（class="delItem"）设置为未勾选状态$(".delitem").prop("checked",false)}
})
//反选
$("tbody").on("click",".delitem",function(){var flag=truefor(var i=0;i<=$(".delitem").length-1;i++){flag=flag & $(".delitem").eq(i).prop("checked")}if(flag){$(".checkAll").prop("checked",true)}else{$(".checkAll").prop("checked",false)}
})//添加小模块呈现
$(".add").click(function(){//页面跳转location.href="add.html"
})//修改小模块回显+信息在小模块复现
//未来元素:HTML里没有，在js里追加的元素 传入包含未来元素的HTML元素
$("tbody").on("click",".update",function(){$.cookie("id",$(this).attr("index"))location.href="update.html"
})
//删除
$("tbody").on("click",".delete",function(){var id = $(this).attr("index")$.ajax({url:"DeleteServlet",type:"post",data:{id},success:function(value){alert(value)location.reload()},error:function(){alert("出错啦")},})
})

SearchSelvet.selvet 

 

package com.qc.servlet;import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.qc.db.MysqlUtil;/*** Servlet implementation class SearchServlett*/
@WebServlet("/SearchServlett")
public class SearchServlett extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public SearchServlett() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String page=request.getParameter("page");String pageSize=request.getParameter("pageSize");String sql="select * from student order by id desc limit "+(Integer.parseInt(page)-1)*Integer.parseInt(pageSize)+","+pageSize;String[] colums= {"id","sex","age","name","imgurl"};String res=MysqlUtil.getJsonBySql(sql, colums);response.setContentType("text/json;charset=utf-8");response.getWriter().write(res);}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubdoGet(request, response);}}

 add.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/add.js" defer></script>
<style>.addModel,.updateModel{/* width:260px;height:140px; */border:5px solid gold;margin-top:20px;padding:10px;}
</style>
</head>
<body><div class='addModel'>姓名:<input type='text' class='addName'><br>年龄:<input type='text' class='addAge'><br>性别:<input type='text' class='addSex'><br><!-- 加入上传文件的控件 -->头像:<form class='imgbox'><!-- form表单 --><input type='file' class='addFile' name='file'><br><!-- 被Form表单包起来的数据就是表单数据 --><input type='hidden' class='imgurl'><!-- hidden是隐藏域，用来做数据传输，把图片的重命名绑到隐藏域里，点击添加时获取隐藏域的值 --></form><!-- 图片缩略图 --><div class='display'></div>自我介绍:<!-- 加载编辑器的容器 --><script id="container" name="content" type="text/plain"></script><!-- 配置文件 --><script type="text/javascript" src="utf8-jsp/ueditor.config.js"></script><!-- 编辑器源码文件 --><script type="text/javascript" src="utf8-jsp/ueditor.all.js"></script><input type='button' value="添加" class='addBtn'><input type='button' value="取消" class='back'></div>
</body>
</html>

 add.js

 

var ue = UE.getEditor('container');//取消 小模块隐藏
$(".back").click(function(){
//	$(".addModel").css("display","none")
//	$(".updateModel").css("display","none")location.href="student.html"
})//添加（从前端页面拿到输入数据）
$(".addBtn").click(function(){//val 获取输入框里的值，trim()去掉空格//从输入框获取姓名var name=$(".addName").val().trim()var age=$(".addAge").val().trim()var sex=$(".addSex").val().trim() var introduce=ue.getContent()//新传入文本编辑器的参数//从隐藏域中取值var imgurl=$(".imgurl").val()if(name==""){alert("姓名不能为空")return}if(age==""){alert("年龄不能为空")return}if(sex==""){alert("性别不能为空")return}$.ajax({url:"AddServlet",type:"post",//name:name ,age:age..因为相同，所以省略，只写一个；//如果前面不同，则不能简写data:{name,age,sex,introduce,imgurl},success:function(value){alert(value)//页面刷新（不需要重新启动）location.href="student.html"},error:function(){alert("出错啦")}})})//图片上传(至服务器的文件夹)
//change：值改变事件
$(".addFile").on("change",function(){//把表单数据序列化//new FormData（）是原生JavaScript的方法，括号里要放dom元素，把表单元素序列化，所以得传一个表单var img_data= new FormData($(".imgbox")[0])//获取图片的名字：console.log(data.get("file").name) OIP-C(3).jpg 不是控件值//控件值：例C:\fakepatg\OIP-C(3).jpgif(img_data.get("file").name){//如果有图片，再传给后端$.ajax({url:"upload",type:"post",data:img_data,contentType:false,//表示默认传的是文本，默认值为true;之前都是文本，所以不用写;设置前端给后端的数据为非文本processData:false,//默认是true，表示以对象形式上传的数据会被转换成字符串的形式；上传文件的时候不需要转换success:function(value){console.log(value)//img标签，展示图片缩略图$(".display").html("<img src='upload/"+value.imgurl+"' width='180' height='100'>")//给隐藏域赋值$(".imgurl").val(value.imgurl)}})}else{alert("请选择图片")$(".imgurl").val("")//把隐藏域中的值清掉$(".dispaly").html("")//把缩略图也清掉}
})

 AddSelvet.java

 

package com.qc.servlet;import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.qc.db.MysqlUtil;/*** Servlet implementation class AddServlet*/
@WebServlet("/AddServlet")
public class AddServlet extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public AddServlet() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubresponse.getWriter().append("Served at: ").append(request.getContextPath());}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//		//接受参数String name=request.getParameter("name");String age=request.getParameter("age");String sex=request.getParameter("sex");String introduce=request.getParameter("introduce");String imgurl=request.getParameter("imgurl");introduce=introduce.replaceAll("\"", "\'");//拼接sqlString sql="insert into student(name,age,sex,introduce) values(\""+name+"\","+age+",\""+sex+"\",\""+introduce+"\")";System.out.println(sql);//执行sql,返回所在行数int num=MysqlUtil.add(sql);//返回信息String res="添加失败";if(num>0) {res="添加成功";}response.setCharacterEncoding("utf-8");response.getWriter().write(res);}}

 update.html

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.7.1.min.js" ></script>
<script src="js/jquery.cookie.min.js"></script>
<script src="js/update.js" defer></script>
<title>Insert title here</title>
<style>.addModel,.updateModel{/* <!---width:260px;height:140px;----!> */border:5px solid gold;margin-top:20px;padding:10px;}
</style>
</head>
<body>
<div class='updateModel'>姓名:<input type='text' class='updateName'><br>性别:<input type='text' class='updateSex'><br>年龄:<input type='text' class='updateAge'><br><!-- 加入上传文件的控件 -->头像:<form class='imgbox'><!-- form表单 --><input type='file' class='updateFile' name='file'><br><!-- 被Form表单包起来的数据就是表单数据 --><input type='hidden' class='imgurl'><!-- hidden是隐藏域，用来做数据传输，把图片的重命名绑到隐藏域里，点击添加时获取隐藏域的值 --></form><!-- 图片缩略图 --><div class='display'></div>自我介绍:<!-- 加载编辑器的容器 --><script id="container" name="content" type="text/plain"></script><!-- 配置文件 --><script type="text/javascript" src="utf8-jsp/ueditor.config.js"></script><!-- 编辑器源码文件 --><script type="text/javascript" src="utf8-jsp/ueditor.all.js"></script><input type='button' value="修改" class='updateBtn'><input type='button' value="取消" class='back'></div>
</body>
</html>

update.js 

 

var ue = UE.getEditor('container');
//取消 小模块隐藏
$(".back").click(function(){//页面跳转location.href="student.html";
})
//回显
var id=$.cookie("id")
$.ajax({url:"SearchById?id="+id,type:"get",success:function(value){var obj=value.data[0]$(".updateName").val(obj.name)$(".updateAge").val(obj.age)$(".updateSex").val(obj.sex)$(".updateBtn").attr("index",obj.id)ue.ready(function(){//等编辑器准备好之后才设置编辑器里的内容ue.setContent(obj.introduce);});//img标签，展示图片缩略图$(".display").html("<img src='upload/"+obj.imgurl+"' width='180' height='100'>")//给隐藏域赋值$(".imgurl").val(obj.imgurl)},error:function(){alert("出错啦")}
})
//修改
$(".updateBtn").click(function(){var name=$(".updateName").val().trim()var sex=$(".updateSex").val().trim()var age=$(".updateAge").val().trim()var id=$.cookie("id")var introduce=ue.getContent()var imgurl=$(".imgurl").val()$.ajax({url:"UpdateServlet",type:"post",data:{name,age,sex,id,introduce,imgurl},success:function(value){alert(value)location.href="student.html";},error:function(){alert("出错啦")}})
})
//图片上传(至服务器的文件夹)
//change：值改变事件
$(".updateFile").on("change",function(){//把表单数据序列化//new FormData（）是原生JavaScript的方法，括号里要放dom元素，把表单元素序列化，所以得传一个表单var img_data= new FormData($(".imgbox")[0])//获取图片的名字：console.log(data.get("file").name) OIP-C(3).jpg 不是控件值//控件值：例C:\fakepatg\OIP-C(3).jpgif(img_data.get("file").name){//如果有图片，再传给后端$.ajax({url:"upload",type:"post",data:img_data,contentType:false,//表示默认传的是文本，默认值为true;之前都是文本，所以不用写;设置前端给后端的数据为非文本processData:false,//默认是true，表示以对象形式上传的数据会被转换成字符串的形式；上传文件的时候不需要转换success:function(value){console.log(value)//img标签，展示图片缩略图$(".display").html("<img src='upload/"+value.imgurl+"' width='180' height='100'>")//给隐藏域赋值$(".imgurl").val(value.imgurl)}})}else{alert("请选择图片")$(".imgurl").val("")//把隐藏域中的值清掉$(".dispaly").html("")//把缩略图也清掉}
})

SearchById.selvet 

 

package com.qc.servlet;import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.qc.db.MysqlUtil;/*** Servlet implementation class SearchById*/
@WebServlet("/SearchById")
public class SearchById extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public SearchById() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.从请求参数中获取id值String id=request.getParameter("id");//2.拼接SQL查询语句String sql="select * from student where id="+id;//3.定义需要从数据库结果集中提取的列名String[] colums= {"id","sex","age","name","introduce","imgurl"};//4.调用工具类方法执行SQL查询并获取JSON格式的结果String res=MysqlUtil.getJsonBySql(sql, colums);//5.设置响应内容类型为JSON格式response.setContentType("text/json;charset=utf-8");//6.将JSON字符串写入响应输出流，返回给前端response.getWriter().write(res);}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubdoGet(request, response);}}

UpdateSelvet 

 

package com.qc.servlet;import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.qc.db.MysqlUtil;/*** Servlet implementation class UpdateServlet*/
@WebServlet("/UpdateServlet")
public class UpdateServlet extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public UpdateServlet() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubresponse.getWriter().append("Served at: ").append(request.getContextPath());}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String name=request.getParameter("name");String age=request.getParameter("age");String sex=request.getParameter("sex");String id=request.getParameter("id");String imgurl=request.getParameter("imgurl");String introduce=request.getParameter("introduce");introduce=introduce.replaceAll("\"","\'");//拼接sqlString sql="update student set name=\""+name+"\",age="+age+",sex=\""+sex+"\",introduce=\""+introduce+"\",imgurl=\""+imgurl+"\" where id="+id;//执行sqlint num=MysqlUtil.update(sql);//返回信息String res="修改失败";if(num>0) {res="修改成功";}response.setCharacterEncoding("utf-8");response.getWriter().write(res);}}

 

相关文章：

  • ChatBEV：一种理解 BEV 地图的可视化语言模型
  • 【论文阅读25】-滑坡时间预测-PFTF
  • 解耦旧系统的利器：Java 中的适配器模式（Adapter Pattern）实战解析
  • bert4keras
  • UV: Python包和项目管理器（从入门到不放弃教程）
  • SQL 时间转换的CONVERT()函数应用说明
  • 实验二 多线程编程实验
  • [蓝桥杯 2025 省 Python B] 最多次数
  • HashedWheelTimer源码分析
  • Scrapy框架爬虫官网的学习
  • OpenCV 图形API（55）颜色空间转换-----将图像从 RGB 色彩空间转换为 I420 格式函数RGB2I420()
  • 第九章：Agent Protocol Implementation
  • 香港云服务器内存使用率过高如何解决此问题
  • PH热榜 | 2025-04-23
  • 【金仓数据库征文】从 HTAP 到 AI 加速，KingbaseES 的未来之路
  • 《AI大模型应知应会100篇》第35篇：Prompt链式调用：解决复杂问题的策略
  • day4 pandas学习
  • godot源码编译
  • Oracle EBS R12.2 汉化
  • Java从入门到“放弃”（精通）之旅——String类⑩
  • 外交部否认中美就关税问题进行磋商谈判
  • 嫦娥五号《月球样品借用协议》签约，2025中国航天公益形象大使公布
  • 中国专家组赴缅开展地震灾害评估工作
  • 建行原副行长章更生被开除党籍：靠贷吃贷，大搞权钱交易
  • “80后”保利文化集团董事长王波挂职哈尔滨副市长，负责文旅、招商
  • 新增1839个！2024年度本科专业备案和审批结果，公布