最简单DIY基于ESP32CAM的物联网相机系统系列文章目录

第一篇：最简单DIY基于ESP32CAM的物联网相机系统①（用网页实现拍照图传）
第二篇：最简单DIY基于ESP32CAM的物联网相机系统②（在JAVAWEB服务器实现图片查看器）
第三篇：最简单DIY基于ESP32CAM的物联网相机系统③（在JSP服务器图传相片给所有客户端欣赏）

文章目录

最简单DIY基于ESP32CAM的物联网相机系统系列文章目录
前言
一、最简单DIY基于ESP32CAM的物联网相机系统③（在JSP服务器图传相片给所有客户端欣赏）是什么？
二、实现需求
- 1.搭建JSP开发环境
- 2.Eclipse导入JSP工程的注意事项
- 3.准备测试源码
三、运行与调试
总结

前言

daodanjishui物联网核心原创技术之最简单DIY基于ESP32CAM的物联网相机系统③（在JSP服务器图传相片给所有客户端欣赏）。
该专栏的第二篇博文：最简单DIY基于ESP32CAM的物联网相机系统②（在JAVAWEB服务器实现图片查看器）介绍了如何使用在服务器推送的主页里面查看自己上传的图片。用软件编程的方式模拟ESP32CAM上传的照片数据，解码显示在JAVAWEB服务器上，让浏览器登录服务器的主页，当前用户能够查看图片，缺点就是不能上传和查看大图，也不能让其他客户端查看图片，作为物联网照相机应该具备有一人拍照多人欣赏才对嘛，呵呵。

一、最简单DIY基于ESP32CAM的物联网相机系统③（在JSP服务器图传相片给所有客户端欣赏）是什么？

在上一篇的基础上，就是说上一篇的功能基础上增加新的功能，加入密码异步上传图片的功能和反馈信息显示，利用JSP底层核心技术，故意抛弃MySQL数据库，实现多个客户端能使用密码实时查看实时更新图片的功能，完成局域网物联网相机系统初步雏形，注意了，上传图片还是用软件去上传或者用提交表单的方式上传，没有用到ESP32CAM相机硬件，因为时机未到！
为什么我能不断发布一个系列的原创软硬件电路方案呢？那是因为我有可观的生活条件，因为我有浓厚的研发和玩耍的兴趣，靠卖这个电路方案养活自己是不可能的！只能牺牲自己的业余时间去奉献自己的开源代码！在企业上班的IT工作人员是没有那么多时间去写这个的，他们已经没有太多学习的时间，再说了他们也不愿意几分钱一行代码去卖了这个电路方案给自己的竞争对手；某电商某培训机构也不可能写这个的，他们要做的是广发广告，招收学徒收取学费，我这几块钱的方案，养他们的广告纸的费用都不够；国内知名专家教授也不可能写这个的，他们需要研究国外高深的人工智能算法，这样好出科研论文成果，没有必要写一个大家都觉得能DIY出来的东西。
我的目的就是做我能做出来的东西，用成熟的技术，用成熟的语言和硬件，为了能让国内对我开源DIY项目感兴趣的一些DIY爱好者树立一个榜样，毕竟以前好多开源的项目都是国外的，外文的，现在国内缺的就是中文详细DIY开源教程，提升和宣传科学素养其实可以从自我做起的，但是吹嘘自己却不写任何核心原创的代码就是浮夸没有任何意义。在CSDN编写专栏博文，为了记录一下当时的幸福瞬间，也为日后著书立作的构想打下锻炼的基础。
请看项目演示的优酷视频：

用网页提交表单的方式传小图：https://v.youku.com/v_show/id_XNTE0OTE4NzgyOA==.html

在JSP服务器共享小图片给所有客户端

用软件提交表单的方式传高清图（用ESP32CAM拍摄的）：https://v.youku.com/v_show/id_XNTE0OTE5MjIzMg==.html

在JSP服务器共享高清相片给所有客户端

二、实现需求

1.搭建JSP开发环境

当今世界JavaWeb技术相当流行了，网上搭建开发环境的资源也很多，我搭建的是Eclipse EE来开发JSP，所以读者可以自己去网上搭建一下了，这里就不多说了。

2.Eclipse导入JSP工程的注意事项

导入工程的注意事项，这个可以谈谈，毕竟自己搭建开发环境可能是几年一次，但是导入工程可能几天一次，呵呵熟练程度都不一样的就不会误人子弟：
（1）比如我要导入一个名字为test_TCP的JSP工程，导进去发现变成了Java工程了，没有那么地球图标在工程旁边了。怎么办呢？可以看出该工程图标还是没有网络的图标的，有网络图标（地球那样的图标）的才是jsp工程，也就是网络工程，图上面那个Qserver工程就是一个web工程。

(2)然后在Eclipse里选中工程–>右键–>properties–>Project Facets 选中“Dynamic Web Module 2.3版本”、和Java两项前面的复选框，然后点Apply—>Save ,最后刷新项目就变成了Web工程了！

(3)结果变成

3.准备测试源码

（1）servlet1.java 后端程序，是一个servlet程序，如何新建一个servlet程序在网上很多教程。

package servlet1;import java.io.IOException;
import java.io.PrintWriter;import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;/*** Servlet implementation class servlet1*/
@WebServlet("/servlet1")
public class servlet1 extends HttpServlet {private static final long serialVersionUID = 1L;//实例变量private ServletConfig config;//1/*** @see HttpServlet#HttpServlet()*/public servlet1() {super();// TODO Auto-generated constructor stub}/*** @see Servlet#init(ServletConfig)*/public void init(ServletConfig config) throws ServletException {//将局部变量config赋值给实例变量configthis.config = config;//2}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubSystem.out.println("进入get方法");response.setContentType("text/ html;charset=UTF-8");//设置响应内容和编码方式String name1=request.getParameter("name");String password1=request.getParameter("password");String picdata=request.getParameter("QOS");//获取ServletContext对象ServletContext application = config.getServletContext();//3//application.setAttribute("data", count1);//将聊天内容保存到applicationPrintWriter out=response.getWriter();//获取输出流对象if(name1.equals("su")&&password1.equals("123456")){//查询点击记录System.out.println("密码和账号名都符合，通过");//out.print("yes");//输出生成后的聊天信息//out.close();//关闭输出流request.setAttribute("name", "yes");request.setAttribute("admin", name1);request.setAttribute("password", password1);   //application.setAttribute("data", "5345345345");//将聊天内容保存到applicationString data1=    (String)application.getAttribute("data");//已经存有值了，取出来  5request.setAttribute("count", data1);                      request.getRequestDispatcher("success.jsp").forward(request, response);// 重定向页面到登录页面}else if(name1.equals("susu")&&password1.equals("123456")){//存入点击记录String count1=request.getParameter("count");application.setAttribute("data", count1);//将聊天内容保存到application  4System.out.println("doGet"+request.getParameter("name")+count1);String data1=   (String)application.getAttribute("data");//已经存有值了，取出来System.out.println(name1+"你成功登录了"+data1);response.getWriter().println(name1+"你成功登录了"+data1);}else if(name1.equals("sususu")&&password1.equals("123456")){//查询图片记录1String data1=  (String)application.getAttribute("data");//已经存有值了，取出来//data1="data:image/jepg;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAADAFBMVEUAAAAAAACAgIBVVVWAgICZmZmAgICSkpKAgICOjo6ZmZmLi4uVlZWJiYmSkpKZmZmPj4+WlpaOjo6UlJSZmZmSkpKXl5eQkJCVlZWZmZmTk5OXl5eSkpKVlZWZmZmUlJSXl5eTk5OWlpaZmZmVlZWYmJiUlJSWlpaZmZmVlZWYmJiUlJSXl5eZmZmWlpaYmJiVlZWXl5eZmZmWlpaYmJiVlZWXl5eZmZmWlpaYmJiVlZWXl5eZmZmWlpaYmJiWlpaXl5eZmZmXl5eYmJiWlpaYmJiZmZmXl5eYmJiWlpaYmJiZmZmXl5eYmJiWlpaYmJiZmZmXl5eYmJiXl5eYmJiZmZmXl5eYmJiXl5eYmJiZmZmXl5eYmJiXl5eYmJiZmZmXl5eYmJiXl5eYmJiZmZmXl5eZmZmXl5eYmJiZmZmYmJiZmZmXl5eYmJiZmZmYmJiZmZmXl5eYmJiZmZmYmJiZmZmXl5eYmJiZmZmYmJiZmZmXl5eYmJiZmZmYmJiZmZmXl5eYmJiZmZmYmJiZmZmXl5eYmJiZmZmYmJiZmZmYmJiYmJiZmZmYmJiZmZmYmJiYmJiZmZmYmJiZmZmYmJiYmJiZmZmYmJiZmZmYmJiYmJiZmZmYmJiZmZmYmJiYmJiZmZmYmJiZmZmYmJiYmJiZmZmYmJiZmZmYmJiYmJiZmZmYmJiZmZmYmJiYmJiZmZmYmJiZmZmYmJiYmJiZmZmYmJiZmZmYmJiYmJiZmZmYmJiZmZmYmJiYmJiZmZmYmJiZmZmYmJiYmJiZmZmYmJiZmZmYmJiYmJiZmZmYmJiZmZmYmJiZmZmZmZmYmJiZmZmYmJiZmZmZmZmYmJiZmZmYmJiZmZmZmZmYmJiZmZmYmJiZmZmZmZmYmJiZmZmYmJiZmZmZmZmYmJiZmZmYmJiZmZmZmZmYmJiZmZmYmJiZmZmZmZmYmJiZmZmYmJiZmZmZmZmYmJiZmZmYmJiZmZmZmZmYmJiZmZmYmJiZmZmZmZmYmJiZmZmYmJiZmZmZmZmby3gIAAAA/3RSTlMAAQIDBAUGBwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMkJSYnKCkqKywtLi8wMTIzNDU2Nzg5Ojs8PT4/QEFCQ0RFRkdISUpLTE1OT1BRUlNUVVZXWFlaW1xdXl9gYWJjZGVmZ2hpamtsbW5vcHFyc3R1dnd4eXp7fH1+f4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS09TV1tfY2drb3N3e3+Dh4uPk5ebn6Onq6+zt7u/w8fLz9PX29/j5+vv8/f7rCNk1AAAPHklEQVQYGeXBd2BUVaIG8G/SIDFICy1ABJSWBAugIkOzrrC6locsT3RV9KGuvUAQQhWwUgVEdGVdlbeI2EAUBaKoiOLqqoBAEAQVpScgkMTMfPt8nklukrlzztxz7s0f9/cDfQ70OdDnQJ8DfQ70OdDnQJ8DfQ70OdDnQJ8DfQ70OdDnQJ8DfQ70OdDnQJ8DfQ70OdDnQJ8DfQ70OdDnQJ8DfQ70OdDnQJ8DfQ70OdDnQJ8DfQ70OdDnQJ8DfQ70OdDnQJ8DfQ6sLcXf//jT3v1FJaxdoNfKNy0cftnZbVIhBFIbZZ5+yS2T/r6mmLUA9FJZQd7ZqbATaHflxDeP0FugZw7Ov6IepJJ7T/y4nN4BvVH+1qA6UNVo2PthegT0wp78TMQnK28jPQG6b8dtqXDgohX0AOi2wmuT4FDus6V0G+iuovtSoKHNi2G6C3RT+dwMaOq6iq4CXfT5aTBgwHd0EeiasrFJMCJ9dpiuAd3yxWkwpvdWugV0ydwUGJT6DF0CuuLoNTBs6HG6AnTD1i4w7oztdAPogoIGUJMx6K+XnQBFDQvoAtC8f9aBmmtLSR46F4rqLKF5oHHTAlBzfZi/KTkPihLm0TjQtBFQ1Oggf7clGaoepGmgYXlQNZURt0PZFBoGmpUPVU2PMuKHFCibQ7NAo8ZD2eOsdDuUBV6gUaBJc6Asp4yVDjWDsqRlNAk0aHkiVAXW0OoFqDvxGxoEmvPvelB2A6s6H+o6FtMc0JjdraCs8X5WtaUO1F0apjGgKeX9oO5vrG4c4jCexoCmjIG6XmFWV9Ie6hI/pimgISsToKz+Vta0EnHocIyGgGbsbQZlgdcZzSjE4Q4aApoxGOrGMKpQf6gLrKIZoBHLoK5/iNEdOgXqTi6hEaAJh1tDWbuDrPD5+fX7fsgKG9Kh7mEaAZpwJ5SlfckKb6QASF7ACi9DXb2faQJowNYkqKq7ghXWpOA3CUtYYRTUDaUJoAEDoSr1HVbY1RS/S/2YEaFroSzhXzQA1LcOqlJXssIvpyOiyTZGhP4Hyi6lAaC+flCUtooVwleiUof9rHAXVAW+oj5Q26dQlLaalfJhFSxhhZFQNZj6QG2Doab1p6y0EFUNCrPCRChK3EptoK5dSVBy4T5W+rQuqhnBStMSoeYmagN1jYCKQH6IlbY0Rw1zWen9VlCSWkRdoKZQCyhouIwW37RATYHZrHTgciiZQ12gppVQ0Hs7LT";//data1=picdata;//刷新页面显示表单提交的base64图片//下面的格式是jpg格式的数据// data1="FFD8FFE000104A46494600010101000000000000FFDB0043000A07080908060A0908090B0B0A0C0F19100F0E0E0F1F161712192420262624202322282D3A31282B362B2223324433363B3D4041402730474C463F4B3A3F403EFFDB0043010B0B0B0F0D0F1D10101D3E2923293E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3EFFC4001F0000010501010101010100000000000000000102030405060708090A0BFFC400B5100002010303020403050504040000017D01020300041105122131410613516107227114328191A1082342B1C11552D1F02433627282090A161718191A25262728292A3435363738393A434445464748494A535455565758595A636465666768696A737475767778797A838485868788898A92939495969798999AA2A3A4A5A6A7A8A9AAB2B3B4B5B6B7B8B9BAC2C3C4C5C6C7C8C9CAD2D3D4D5D6D7D8D9DAE1E2E3E4E5E6E7E8E9EAF1F2F3F4F5F6F7F8F9FAFFC4001F0100030101010101010101010000000000000102030405060708090A0BFFC400B51100020102040403040705040400010277000102031104052131061241510761711322328108144291A1B1C109233352F0156272D10A162434E125F11718191A262728292A35363738393A434445464748494A535455565758595A636465666768696A737475767778797A82838485868788898A92939495969798999AA2A3A4A5A6A7A8A9AAB2B3B4B5B6B7B8B9BAC2C3C4C5C6C7C8C9CAD2D3D4D5D6D7D8D9DAE2E3E4E5E6E7E8E9EAF2F3F4F5F6F7F8F9FAFFC000110800F0014003012100021101031101FFDA000C03010002110311003F00F3661F31C8A69C77AD2DA8AC251B6900E094ED83D2818E11D3BCB1E9474043C463D29CB10F4A90B120847A54A215FEE8A02C48205FEE0A905BA9FE014C2C3BECC9FDC14FFB22FF0070520B6827D957FB8294409FDDA2F70B12F931FF0074537CA8FF00B8B45EC1C886BC51E3FD5AD5778D7D2AEE2E52B48ABFDDACFBA207CA050162AD3714862518A2E02525003B711D294BBB0E698ADD4662936D030C5254809475A6018A3028480D895F754216890876DA7AA5201E169DB290C76CA9047400F11D3C474864A23A94474C63C254A129B18F0B532818A9B808D18A8FCBE6840214A6E29DC191B8AAF2534499D752AA719E4D50DF17F709FC6A9886EF8BFE79E3F1A6FEEBD28013E41DA9A2800C034141EB408662928189452B80DA2900628A60253851B08D6D94A16861D47AA53C254DC192ECA7F9740C788EA41150344823A788A95C64822A904745CAE83C253B6E2801C052D21584EF494CA1180A85A8B92C88D67DDDC6CC81CB5508C77DCE773119A8F67BD04885293140C31498A02C18A5DB4C426DA4DB400CC51400945200A4A0028A606F6CA3148448AB5284E2A4689112A6116681A2411D4A23A2E50ED94F09400F0B4EC52185140C292801ACC2A3325310DDDB9B6AFCCC7B0AB3169D7B37FCB2F287AC868B8333FC4B0A69E96F0C7317965CB37B0AE6B9AB15C61069B489100F4A9447EB4819205A0A8AA111903D298D4011D21A006D2500251482E2514C0292988EA244C1A8F6D4EC32409532AD4822745A940A43EA4A053B1499414B9A630DD46FA0634C80530DC20C73C1A0438BFB1A612EC78E053B0AE215F7A63271549124DA10CF8860F68E43FA574F3CB0DA40D7174FB225EA7D6A376079E5F5CADEDFDC5D01812C85867D2AA9AB42198A6902A82C1B69DD695805C5466811193519A0630D3680129298052639A91094B4C04A4A181E83AA58792DB97943DEB2B673517BB112AAD48129752D6C4AA2A40298C70A2A460580A864BA893EF381F5A6905CA72EAD0F223064FA553975595BEE22AFEB4EC2B9D6782638351B492EAE67B347B393F7BE6B6D6C750D5CE788B5FB8D63512518A59424AC0806DE3D688A25EA6625D5C45FEAA7953FE05538D56EC759437D5055058B11EB478F3E01F58EAC1D56D08FBB3FFDF22802B5B6B8F637C2EADADD5D8214FDF1F5A8B52D62F7579B7DDC9841F7218F845A5CB6D40AC3A52E45574018D4014C18B8A7530186A26EB522236A61EB40C61A4C5020A6E298C4A29009477A004A2901DCC7A8CF7FA24C1D97CE830481DC0AAFC1E57BD4DAC03D454ABD3DA801E053C521886451DEAB4B75B7B8A2C3B99571A93B71163EB544B93F7B9AAD89B894A39A6046CA09E69DC01C51E4025368016937508009A54A009FB50B400EDB4FC62A804A4634011534D21119A8CD2631B487AD002521A60C4A2810946298C4A434AE23B1FB45B2CE9B8FCB0C6718FE226A4B7F29C7EEB217F841A8BF41FA936CF6A955287B0F71D8C0A8DAA47B19D777223CF3F37A5654D3BC879E955125B20A5ABB009452012928B0C4A28B12369298C2A48A90C9AA4515421DDE9F8E295C06D42D4C43298681919A61A4018A6D00368A6026292900514C4369B5233D7869F6B04B882C9096E59A8B8B75D4232A0C71B7F0C817EE9A8EA072EDA91B2B97B3D56D8A4D170CF09DC2A65D534D3FF2F58FF7908A7240326D56C47DC94C87D96B326D4A4947EED7CB1FAD090145B9EA699542131453189498A0028A006D252EA025069809534638A404C0548A2A80936FA52D0042D511A0436A334EE030D30D4F98C5EB4C34C42525218B4948421A4A603714940CF6B8E61DFAD5112F9324ABC055E41F5ACD81C8EAD70B7D3E7ECE04C78DD9EB592CA43ED78DD1BD1948AB888429CD2E2AB70136D3715231369A4C51D02E18A4DB40098A6D5806292A0371B4555804C5598870296C058414FC53017A531A80236A8F1400C6A8F1400DE949DA90086994C04A31406C18A314844745301B4DCD219E9335D2C954EFEE9FECC52338CFA543DC465DADBCB777F6B6F00CCD24CA147E35EDFE37F0E3788344305B794972AE245664EB8ED55703C3E5B596DE630CF1B248095208F4A84C75A586336D336F34804C526295804C521E295810DA4C530129B4804A4A004AB71AD005A0B814BB69D801EA063400CEF4D2290119A8F14C02936E69086E2938A004A4CD301334C6A40369B40C616F4A6EEA00E9DEE4890A99707BAE6A7B6F32EA5482DE37B895FEEA20C9343048F4FF0000F8325B09D756D59425C6DFDD5BF5F2FDEBD0AA01999AE68561AE599B7BE8B3CE43AF0CA6BCBFC73E124D0E5B4974E129B4946C9377CD87ED571611390680A3B210772F504543B2980CDB4DDB400DC533140098A6E280136D262900CED49430136E4D68423934016314A3A530227AAE6801314CA0069A5F96A7A80C66E38A6E714C084F34628108C29BB6980E3C0A88D218CE82A266CD2018692981F52BE83A34CBB66D22C1C673CDBAF5ABFA769961A7822C6CADADB3D7CA8C2D43D5DC84FA17A8A0614505181E21F09E97AE2BC935BAA5E15C2DC2FDEAF19D474CB9D36F24B4BE8FCB9558E38E1C7AD6917A014CC4454456900C2B4CC5031B8A6E2810DC53714806525002C7FEB53EB5A502FCF40DB25E99A4DBF2D5741103E7D2A1C52003F76A300D021C715195A02C47B79A6ED24D2189B6900AA10114C26901131CD44CDB690C84F3494009494C47D6CA6ACA54103E8A0A0A28282B2BC45A1DB6BFA5B59DCFCA7EF4720EB1B7AD09D80F3993C07AB2CAD6E93D85C9C678936B0AE5EFB4EBBD3EE8DB5FDBB5BCD8CED6EE3D6AC0A263E6985298C614A8CAD026348A662801869A452B00E847EF96B52DD783C5201C571438C0A605692A1A621714DC5218DC73CD3587340836E2A3238A008CD20A2E035EA16A0640EFE950D30B0946326A4094427D29180CE2811F5629A9D1EA482C039A5A0A0A29141453018228C486408A1DBAB63935E6FF0014AD651AAE9F7C41FB3081E166ECADB8114E20711E502B9150F95ED4C352264A859298C8DD6A322811195A6114809F4F84CFA84312ED05B3F7BE95D0C7A44FB3E5789BF1C52B811B69B7BFF3C377FBA73514D6777DAD66E3FD9A2E8115BEC1745BE68B67FBE7153C7A3B11F3CEA3FDD5AAB831DFD8F8FF009793FF007C54526927F86607EA28B85C80E953F6922FD69BFD9771D4B45F81A57011F4F9F1C18CFE355CD8CC3A98FF003A0067D818F575FCA87B02A3FD60FA62988AB2DB1442CEEBC5664926EA9023A4A631557356A389704E4D3063DB6AE76B1E3D6A9D0893EA21254E9254124CB2D4CB35059279829DBC5218BB8526E1480378A8A6114D198E58D5D0F50C3340CE7AFBC23A34D6970B6D6305BDC491954940FB86BCE6FB4ABBD36610EA10F96C4E03FF0003D68A57033A484EDE9554C54C440E950B2D0044C2A322802FF879776BF10F48A43FA575F08F92A46498AAD2D0229375A994714C01AA26A403319A465AA02BCAD8154DCD021955EE255B788C937E9DE981CF5CDC3DCBEE6E0765A82A4618CD49E560F3401613E4C734F278CEFEFE9544D88A76FDD9E7EF1AAB48763E951254826A8249566A904D40C904C69E24A450F0F4EDD4863B34B400B4C96349A231CD1AC919EAAC33480F37F15E891E997D17D9FF00E3DAE33B17FB98C715CF4B0E2B5DC452923AA8E954040CB5130A4068786FFE43E3FEBDA5FF00D96BAB87A5475193374AA9374A6228FF001D595140038A8698062A199B8A62283B5566396A0647713476B1799377E95CDDC4EF7126F93F0F6A4221A7246D2360034C65944454FF006A933B9B269D843C71DC534D022B39DC69B5251F456EA7835249286A955A901286A9435328914D4AB5204805481298C788E9FE5D2194B55D2A1D52C4DB4F9C677291D8D79B6AFA67D8AFE5B52DBFCBEF8EB55113316E20ACF952A8453916A0229817FC3633AF8FFAF697FF0065AE951D40FBE9FF007D54F51B6580411C321FA3556B8071D28623265BA82090F9B20E3B2FCD5343A959BFFCB461FEF2114EC048D756FF00F3F117FDF755FED76D9FF8F98BF3A902C6F0CB942187B5529E402A80CBBABB546DA3E63EC6A1FED18557F788EBF4E6811877570D753190F03A28F6AAF40C92281E5FBAA719C5593FB9242641FAD302239C53853420A8DDBB0A4C4458A4A451F42669E0D4104A0D4AB4CA274AB11A52196522AB490D202608053AA82E1452B05C2B3755D1ED75300CCA44ABC2BAF5A60798EA368F04F2C32821A362BD319AC5992AD014645AACEB40587582FF00A67FDB33FD2ADEC553D285B80F1F4C557B8C629582E53E335327634DB02197AF148BD6980E925644F95997E86A93CAD27DF766FA9A2E045D2A9DC49B9BDA9015EAC5B5A3CCFD3E5033D6908B5295812345429DFAF5AA839AA1084F34F193D280124F938EF50E2A6E50B4DA407BF0A9454904AB561050517214C9AD486DF039A06580A052D00145300A2800A2901CEEB5E1FB5D49A4981315D30E1F3C66BCDB52B49ACEE1E0B842B22F06A93B819522D52907354807D92FFA4B1F44AB0E0D2B6A028F4355EE4F3ED40153BD4DF7538A1202B31E69F1F5CD302ADD4BDAA0148082E5F0368AA7400E863F365DBC74CD6B4B8589C8897E55DBC5344994ED96A7A296C051CD31938B523E6938C751DE9F28584796BF5CD022A919EB4D3598C6D25319EF2185481EA4827426ADC4A4D219B1630F76AD0A650514C028A0028A4030BE180F5A8DE4A91D8ACCD583E26D1FFB62DA2314889750FDDDDD197D29A6079DDFD9DC5A4862BA88C527F74D66B2569701DA7AFEFE51FEC7F5A9A55F9E8111E39E2AB5C727A50040AB9A7C846DA16C054A90FCB0D0232C9F325F614AC4019A00A0CDB8E4D32819A76F1793173B771FBD9ED504F977D8A9D5AA844D1DAC689BA4CBBFF1475676EDF953083F848E4D0909B18F2ECF9CF5CF393C9ACE272734A411419A61A8284A4A607BC0515320152416A3C55B89A90CD1B79F6D5E59D0D318EF357D68F353D68013CE5A699C5218D371519B8F7A0642D71C8A89A63523226626A3A06637887456D5D626865449E305407E8C2B85BDB09ECA7F22EA231C98CE0F715A4592C86C108BFF00FB66DFD2AC4D1F39A6B7115F6E1F8AA371EB4D80C8C7150CA79C50040A3E6A6DF49B52802A449B5707EF1ED55AECE0ECA00A86A7B440D27CDD2981A861431B6E91C90BFDDEF4F95D4A6DFF00640E94EC410EE5193D48FBC3D45432B6D8CA9E075AA622A492191B71A6562F534129B4C04CD25303DE81A954D419932B54E9252289966A9967A631EB71F2F5A5FB4FBD218BF68F4A4F389A00379A4DD486216E4519A43128A004AA9A869F0EA56AD0CF1077C1F29BBA9A6983380B48BFD2149186E54D58960F5AD092ABC3F3645675CC3F353021D98155261400D857E7DC7A0AA572BE7DCEDE7681CD00741E7A5DDA8F3A34767EA87AE45737ACE9C6CE4F322324B01FE33D88EB49099926B4B4E8F31B390FC11B768EF4C099A63B9B1DCF7A63B71CFF002EB54490C93851CF5C718AA6CCCED9352C682928286D21A4021A4A047BC66A4069103C353C495232412D481CD052151AA50690C786A5DF40C766973400B4EA005A5C503176D3829CD00547D1AC25B9F3A4B44DE4E4919158773A76C2430C1EC0FA5526C4CC9B9B7DBDAB32E6207B53114DD38E9599728564C1CD30000A427DEA84439924F53401A36ED8B463B013190DD7B77ABB2A2989D64CE1861941EA2992CE46FEC5ED27933F3441B87AB366D8B454FDE67CDDDF2D3EA220DDD0F4A82694F4A4510734EA430A69A4032928012929D80F73DF4EC9A9331EB52AD21920352034142A372DED52E681A1C0D3E900F14F1400EA940A064816A558A80274B627B54EB6C3BD00482141DAA2B9B1B5BA8F65C42AE2A908E4355D19937FF674CC4A7FCB199B21AB959E54594A5CFEE1C7693E5A695C0A777A869F6DF2B5CFCD8EBB1B159F36C9F6B42E9221FE2534C0AD7E0A59BEDEBB703EB544C7B140F4A604F6F8769A22CD82B8201356F7FEEE39157276FBFE3551421971B7CB6638C0218FF2AC5906C5976F63D41F5A09450924DBD2A1E49C9A92C78A4A901B4C34C06D36800A2811EE029E29103C1A901A431E0D480D0304FF005927E1530340C78A7834864CB532AD002BC370CF1F926209FC7BF39ABC9013DA802D25B7AD4EB1AAD003E8A6023305193552E6E7098534C0C699B9AAACDEB83FEF0CD4011F9847F77FEF915CA6BBA234737DBF49817CB639B9B58C739FEF534073D7FBA680793637FE446E249A67B665555159535EDAE7F77287FF0074550586DB4D11D5576B7CAD03678EE0835A91AAE144638C6739FCAB44C82BDD1D90CB11C80C8DD3D6B06E65A0651FBC726A41599414DA0069A61A006D2500145311EDD4FA4663C53C50512034E1486283F3D4C281920A936B1FBB40CB96B1395F98568C36A4D005D8EDD56A5C6280168A6021602A192E15471480CFB9BAE3F1155249735232A3B542C68023351E7078A00467723E66247A1ACD6D1F4767DD2693644FFB98A3611817DE108E0BC5BDD2A5DB1AFCCF04BCFD6B2ED8AB7CFF00C5DAB54DB42296AAFB0A9F5DCA6B9A949761400E55A7548C65333400C34DA006D1400528A623DB29C29198F14FA063C1A7D032BE6F7FB4976A402CF6FCCC4FCD57D68193A569D8DB34DCA8E3D69146CC36CB18E79353D300A3A5022269D16AB4B77E940155EE4D5769A90CAB3C9F2AFF00BC298CF520444D4668018698680184D34D00378DDF374EF5C2CD0B5A4F244FFF002CA4DDBBDAB4812D98DAEB7EF318C6EF9C561C6BB9C9A18E24C6A3348630D30D301B4DA006D1400B4B401ED34ECD2311E0D3E818E14F069143C54AB4C6585E548AE9F4FBA492CE3DDB236C6368348772D79A9FDEA8DAE5053B08AEF7B559EE89A065779EA2796819117A8CC948089DF38FAD34B5201BBA999A0069A666900D34D34C08CD65EAF6493C2F2851E66DC37B8AA8EE4C8E1359F9A085F1D7233E95456DFCBB2495860C9CD121C5959AA26A063334D34C06934DA042514863E8C5324F6614E069190E14FCD050FCD381A063C1A954D032C466AE473E280253747D690CFEF400DF3A9865A0A2332534C9486337D37750030B504D201B9A4CD00349A693400D34CA0061A66706988E37C49A53ACAA912B7D9AE1FEFF00643585A9C80C9B47DD5E05509196CD519A4511D3734C06E692800A5A007D25049FFFD9";// data1 = data1.replaceAll(" ", "");//去除字符串的空格System.out.println(name1+"显示图片数据"+data1);//response.getWriter().println(data1);//这个是不刷新页面,异步显示后台写好的base64字符串data1="``````";但是不能显示表单提交的字符串，用第二个异步表单提交request.setAttribute("data", data1);request.getRequestDispatcher("index.jsp").forward(request, response);// 重定向页面到登录页面,这个是刷新页面显示表单提交的base64图片，用第一个表单提交}else if(name1.equals("susususu")&&password1.equals("123456")){//存入图片记录//picdata="FFD8FFE000104A46494600010101000000000000FFDB0043000A07080908060A0908090B0B0A0C0F19100F0E0E0F1F161712192420262624202322282D3A31282B362B2223324433363B3D4041402730474C463F4B3A3F403EFFDB0043010B0B0B0F0D0F1D10101D3E2923293E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3E3EFFC4001F0000010501010101010100000000000000000102030405060708090A0BFFC400B5100002010303020403050504040000017D01020300041105122131410613516107227114328191A1082342B1C11552D1F02433627282090A161718191A25262728292A3435363738393A434445464748494A535455565758595A636465666768696A737475767778797A838485868788898A92939495969798999AA2A3A4A5A6A7A8A9AAB2B3B4B5B6B7B8B9BAC2C3C4C5C6C7C8C9CAD2D3D4D5D6D7D8D9DAE1E2E3E4E5E6E7E8E9EAF1F2F3F4F5F6F7F8F9FAFFC4001F0100030101010101010101010000000000000102030405060708090A0BFFC400B51100020102040403040705040400010277000102031104052131061241510761711322328108144291A1B1C109233352F0156272D10A162434E125F11718191A262728292A35363738393A434445464748494A535455565758595A636465666768696A737475767778797A82838485868788898A92939495969798999AA2A3A4A5A6A7A8A9AAB2B3B4B5B6B7B8B9BAC2C3C4C5C6C7C8C9CAD2D3D4D5D6D7D8D9DAE2E3E4E5E6E7E8E9EAF2F3F4F5F6F7F8F9FAFFC000110800F0014003012100021101031101FFDA000C03010002110311003F00F3661F31C8A69C77AD2DA8AC251B6900E094ED83D2818E11D3BCB1E9474043C463D29CB10F4A90B120847A54A215FEE8A02C48205FEE0A905BA9FE014C2C3BECC9FDC14FFB22FF0070520B6827D957FB8294409FDDA2F70B12F931FF0074537CA8FF00B8B45EC1C886BC51E3FD5AD5778D7D2AEE2E52B48ABFDDACFBA207CA050162AD3714862518A2E02525003B711D294BBB0E698ADD4662936D030C5254809475A6018A3028480D895F754216890876DA7AA5201E169DB290C76CA9047400F11D3C474864A23A94474C63C254A129B18F0B532818A9B808D18A8FCBE6840214A6E29DC191B8AAF2534499D752AA719E4D50DF17F709FC6A9886EF8BFE79E3F1A6FEEBD28013E41DA9A2800C034141EB408662928189452B80DA2900628A60253851B08D6D94A16861D47AA53C254DC192ECA7F9740C788EA41150344823A788A95C64822A904745CAE83C253B6E2801C052D21584EF494CA1180A85A8B92C88D67DDDC6CC81CB5508C77DCE773119A8F67BD04885293140C31498A02C18A5DB4C426DA4DB400CC51400945200A4A0028A606F6CA3148448AB5284E2A4689112A6116681A2411D4A23A2E50ED94F09400F0B4EC52185140C292801ACC2A3325310DDDB9B6AFCCC7B0AB3169D7B37FCB2F287AC868B8333FC4B0A69E96F0C7317965CB37B0AE6B9AB15C61069B489100F4A9447EB4819205A0A8AA111903D298D4011D21A006D2500251482E2514C0292988EA244C1A8F6D4EC32409532AD4822745A940A43EA4A053B1499414B9A630DD46FA0634C80530DC20C73C1A0438BFB1A612EC78E053B0AE215F7A63271549124DA10CF8860F68E43FA574F3CB0DA40D7174FB225EA7D6A376079E5F5CADEDFDC5D01812C85867D2AA9AB42198A6902A82C1B69DD695805C5466811193519A0630D3680129298052639A91094B4C04A4A181E83AA58792DB97943DEB2B673517BB112AAD48129752D6C4AA2A40298C70A2A460580A864BA893EF381F5A6905CA72EAD0F223064FA553975595BEE22AFEB4EC2B9D6782638351B492EAE67B347B393F7BE6B6D6C750D5CE788B5FB8D63512518A59424AC0806DE3D688A25EA6625D5C45FEAA7953FE05538D56EC759437D5055058B11EB478F3E01F58EAC1D56D08FBB3FFDF22802B5B6B8F637C2EADADD5D8214FDF1F5A8B52D62F7579B7DDC9841F7218F845A5CB6D40AC3A52E45574018D4014C18B8A7530186A26EB522236A61EB40C61A4C5020A6E298C4A29009477A004A2901DCC7A8CF7FA24C1D97CE830481DC0AAFC1E57BD4DAC03D454ABD3DA801E053C521886451DEAB4B75B7B8A2C3B99571A93B71163EB544B93F7B9AAD89B894A39A6046CA09E69DC01C51E4025368016937508009A54A009FB50B400EDB4FC62A804A4634011534D21119A8CD2631B487AD002521A60C4A2810946298C4A434AE23B1FB45B2CE9B8FCB0C6718FE226A4B7F29C7EEB217F841A8BF41FA936CF6A955287B0F71D8C0A8DAA47B19D777223CF3F37A5654D3BC879E955125B20A5ABB009452012928B0C4A28B12369298C2A48A90C9AA4515421DDE9F8E295C06D42D4C43298681919A61A4018A6D00368A6026292900514C4369B5233D7869F6B04B882C9096E59A8B8B75D4232A0C71B7F0C817EE9A8EA072EDA91B2B97B3D56D8A4D170CF09DC2A65D534D3FF2F58FF7908A7240326D56C47DC94C87D96B326D4A4947EED7CB1FAD090145B9EA699542131453189498A0028A006D252EA025069809534638A404C0548A2A80936FA52D0042D511A0436A334EE030D30D4F98C5EB4C34C42525218B4948421A4A603714940CF6B8E61DFAD5112F9324ABC055E41F5ACD81C8EAD70B7D3E7ECE04C78DD9EB592CA43ED78DD1BD1948AB888429CD2E2AB70136D3715231369A4C51D02E18A4DB40098A6D5806292A0371B4555804C5598870296C058414FC53017A531A80236A8F1400C6A8F1400DE949DA90086994C04A31406C18A314844745301B4DCD219E9335D2C954EFEE9FECC52338CFA543DC465DADBCB777F6B6F00CCD24CA147E35EDFE37F0E3788344305B794972AE245664EB8ED55703C3E5B596DE630CF1B248095208F4A84C75A586336D336F34804C526295804C521E295810DA4C530129B4804A4A004AB71AD005A0B814BB69D801EA063400CEF4D2290119A8F14C02936E69086E2938A004A4CD301334C6A40369B40C616F4A6EEA00E9DEE4890A99707BAE6A7B6F32EA5482DE37B895FEEA20C9343048F4FF0000F8325B09D756D59425C6DFDD5BF5F2FDEBD0AA01999AE68561AE599B7BE8B3CE43AF0CA6BCBFC73E124D0E5B4974E129B4946C9377CD87ED571611390680A3B210772F504543B2980CDB4DDB400DC533140098A6E280136D262900CED49430136E4D68423934016314A3A530227AAE6801314CA0069A5F96A7A80C66E38A6E714C084F34628108C29BB6980E3C0A88D218CE82A266CD2018692981F52BE83A34CBB66D22C1C673CDBAF5ABFA769961A7822C6CADADB3D7CA8C2D43D5DC84FA17A8A0614505181E21F09E97AE2BC935BAA5E15C2DC2FDEAF19D474CB9D36F24B4BE8FCB9558E38E1C7AD6917A014CC4454456900C2B4CC5031B8A6E2810DC53714806525002C7FEB53EB5A502FCF40DB25E99A4DBF2D5741103E7D2A1C52003F76A300D021C715195A02C47B79A6ED24D2189B6900AA10114C26901131CD44CDB690C84F3494009494C47D6CA6ACA54103E8A0A0A28282B2BC45A1DB6BFA5B59DCFCA7EF4720EB1B7AD09D80F3993C07AB2CAD6E93D85C9C678936B0AE5EFB4EBBD3EE8DB5FDBB5BCD8CED6EE3D6AC0A263E6985298C614A8CAD026348A662801869A452B00E847EF96B52DD783C5201C571438C0A605692A1A621714DC5218DC73CD3587340836E2A3238A008CD20A2E035EA16A0640EFE950D30B0946326A4094427D29180CE2811F5629A9D1EA482C039A5A0A0A29141453018228C486408A1DBAB63935E6FF0014AD651AAE9F7C41FB3081E166ECADB8114E20711E502B9150F95ED4C352264A859298C8DD6A322811195A6114809F4F84CFA84312ED05B3F7BE95D0C7A44FB3E5789BF1C52B811B69B7BFF3C377FBA73514D6777DAD66E3FD9A2E8115BEC1745BE68B67FBE7153C7A3B11F3CEA3FDD5AAB831DFD8F8FF009793FF007C54526927F86607EA28B85C80E953F6922FD69BFD9771D4B45F81A57011F4F9F1C18CFE355CD8CC3A98FF003A0067D818F575FCA87B02A3FD60FA62988AB2DB1442CEEBC5664926EA9023A4A631557356A389704E4D3063DB6AE76B1E3D6A9D0893EA21254E9254124CB2D4CB35059279829DBC5218BB8526E1480378A8A6114D198E58D5D0F50C3340CE7AFBC23A34D6970B6D6305BDC491954940FB86BCE6FB4ABBD36610EA10F96C4E03FF0003D68A57033A484EDE9554C54C440E950B2D0044C2A322802FF879776BF10F48A43FA575F08F92A46498AAD2D0229375A994714C01AA26A403319A465AA02BCAD8154DCD021955EE255B788C937E9DE981CF5CDC3DCBEE6E0765A82A4618CD49E560F3401613E4C734F278CEFEFE9544D88A76FDD9E7EF1AAB48763E951254826A8249566A904D40C904C69E24A450F0F4EDD4863B34B400B4C96349A231CD1AC919EAAC33480F37F15E891E997D17D9FF00E3DAE33B17FB98C715CF4B0E2B5DC452923AA8E954040CB5130A4068786FFE43E3FEBDA5FF00D96BAB87A5475193374AA9374A6228FF001D595140038A8698062A199B8A62283B5566396A0647713476B1799377E95CDDC4EF7126F93F0F6A4221A7246D2360034C65944454FF006A933B9B269D843C71DC534D022B39DC69B5251F456EA7835249286A955A901286A9435328914D4AB5204805481298C788E9FE5D2194B55D2A1D52C4DB4F9C677291D8D79B6AFA67D8AFE5B52DBFCBEF8EB55113316E20ACF952A8453916A0229817FC3633AF8FFAF697FF0065AE951D40FBE9FF007D54F51B6580411C321FA3556B8071D28623265BA82090F9B20E3B2FCD5343A959BFFCB461FEF2114EC048D756FF00F3F117FDF755FED76D9FF8F98BF3A902C6F0CB942187B5529E402A80CBBABB546DA3E63EC6A1FED18557F788EBF4E6811877570D753190F03A28F6AAF40C92281E5FBAA719C5593FB9242641FAD302239C53853420A8DDBB0A4C4458A4A451F42669E0D4104A0D4AB4CA274AB11A52196522AB490D202608053AA82E1452B05C2B3755D1ED75300CCA44ABC2BAF5A60798EA368F04F2C32821A362BD319AC5992AD014645AACEB40587582FF00A67FDB33FD2ADEC553D285B80F1F4C557B8C629582E53E335327634DB02197AF148BD6980E925644F95997E86A93CAD27DF766FA9A2E045D2A9DC49B9BDA9015EAC5B5A3CCFD3E5033D6908B5295812345429DFAF5AA839AA1084F34F193D280124F938EF50E2A6E50B4DA407BF0A9454904AB561050517214C9AD486DF039A06580A052D00145300A2800A2901CEEB5E1FB5D49A4981315D30E1F3C66BCDB52B49ACEE1E0B842B22F06A93B819522D52907354807D92FFA4B1F44AB0E0D2B6A028F4355EE4F3ED40153BD4DF7538A1202B31E69F1F5CD302ADD4BDAA0148082E5F0368AA7400E863F365DBC74CD6B4B8589C8897E55DBC5344994ED96A7A296C051CD31938B523E6938C751DE9F28584796BF5CD022A919EB4D3598C6D25319EF2185481EA4827426ADC4A4D219B1630F76AD0A650514C028A0028A4030BE180F5A8DE4A91D8ACCD583E26D1FFB62DA2314889750FDDDDD197D29A6079DDFD9DC5A4862BA88C527F74D66B2569701DA7AFEFE51FEC7F5A9A55F9E8111E39E2AB5C727A50040AB9A7C846DA16C054A90FCB0D0232C9F325F614AC4019A00A0CDB8E4D32819A76F1793173B771FBD9ED504F977D8A9D5AA844D1DAC689BA4CBBFF1475676EDF953083F848E4D0909B18F2ECF9CF5CF393C9ACE272734A411419A61A8284A4A607BC0515320152416A3C55B89A90CD1B79F6D5E59D0D318EF357D68F353D68013CE5A699C5218D371519B8F7A0642D71C8A89A63523226626A3A06637887456D5D626865449E305407E8C2B85BDB09ECA7F22EA231C98CE0F715A4592C86C108BFF00FB66DFD2AC4D1F39A6B7115F6E1F8AA371EB4D80C8C7150CA79C50040A3E6A6DF49B52802A449B5707EF1ED55AECE0ECA00A86A7B440D27CDD2981A861431B6E91C90BFDDEF4F95D4A6DFF00640E94EC410EE5193D48FBC3D45432B6D8CA9E075AA622A492191B71A6562F534129B4C04CD25303DE81A954D419932B54E9252289966A9967A631EB71F2F5A5FB4FBD218BF68F4A4F389A00379A4DD486216E4519A43128A004AA9A869F0EA56AD0CF1077C1F29BBA9A6983380B48BFD2149186E54D58960F5AD092ABC3F3645675CC3F353021D98155261400D857E7DC7A0AA572BE7DCEDE7681CD00741E7A5DDA8F3A34767EA87AE45737ACE9C6CE4F322324B01FE33D88EB49099926B4B4E8F31B390FC11B768EF4C099A63B9B1DCF7A63B71CFF002EB54490C93851CF5C718AA6CCCED9352C682928286D21A4021A4A047BC66A4069103C353C495232412D481CD052151AA50690C786A5DF40C766973400B4EA005A5C503176D3829CD00547D1AC25B9F3A4B44DE4E4919158773A76C2430C1EC0FA5526C4CC9B9B7DBDAB32E6207B53114DD38E9599728564C1CD30000A427DEA84439924F53401A36ED8B463B013190DD7B77ABB2A2989D64CE1861941EA2992CE46FEC5ED27933F3441B87AB366D8B454FDE67CDDDF2D3EA220DDD0F4A82694F4A4510734EA430A69A4032928012929D80F73DF4EC9A9331EB52AD21920352034142A372DED52E681A1C0D3E900F14F1400EA940A064816A558A80274B627B54EB6C3BD00482141DAA2B9B1B5BA8F65C42AE2A908E4355D19937FF674CC4A7FCB199B21AB959E54594A5CFEE1C7693E5A695C0A777A869F6DF2B5CFCD8EBB1B159F36C9F6B42E9221FE2534C0AD7E0A59BEDEBB703EB544C7B140F4A604F6F8769A22CD82B8201356F7FEEE39157276FBFE3551421971B7CB6638C0218FF2AC5906C5976F63D41F5A09450924DBD2A1E49C9A92C78A4A901B4C34C06D36800A2811EE029E29103C1A901A431E0D480D0304FF005927E1530340C78A7834864CB532AD002BC370CF1F926209FC7BF39ABC9013DA802D25B7AD4EB1AAD003E8A6023305193552E6E7098534C0C699B9AAACDEB83FEF0CD4011F9847F77FEF915CA6BBA234737DBF49817CB639B9B58C739FEF534073D7FBA680793637FE446E249A67B665555159535EDAE7F77287FF0074550586DB4D11D5576B7CAD03678EE0835A91AAE144638C6739FCAB44C82BDD1D90CB11C80C8DD3D6B06E65A0651FBC726A41599414DA0069A61A006D2500145311EDD4FA4663C53C50512034E1486283F3D4C281920A936B1FBB40CB96B1395F98568C36A4D005D8EDD56A5C6280168A6021602A192E15471480CFB9BAE3F1155249735232A3B542C68023351E7078A00467723E66247A1ACD6D1F4767DD2693644FFB98A3611817DE108E0BC5BDD2A5DB1AFCCF04BCFD6B2ED8AB7CFF00C5DAB54DB42296AAFB0A9F5DCA6B9A949761400E55A7548C65333400C34DA006D1400528A623DB29C29198F14FA063C1A7D032BE6F7FB4976A402CF6FCCC4FCD57D68193A569D8DB34DCA8E3D69146CC36CB18E79353D300A3A5022269D16AB4B77E940155EE4D5769A90CAB3C9F2AFF00BC298CF520444D4668018698680184D34D00378DDF374EF5C2CD0B5A4F244FFF002CA4DDBBDAB4812D98DAEB7EF318C6EF9C561C6BB9C9A18E24C6A3348630D30D301B4DA006D1400B4B401ED34ECD2311E0D3E818E14F069143C54AB4C6585E548AE9F4FBA492CE3DDB236C6368348772D79A9FDEA8DAE5053B08AEF7B559EE89A065779EA2796819117A8CC948089DF38FAD34B5201BBA999A0069A666900D34D34C08CD65EAF6493C2F2851E66DC37B8AA8EE4C8E1359F9A085F1D7233E95456DFCBB2495860C9CD121C5959AA26A063334D34C06934DA042514863E8C5324F6614E069190E14FCD050FCD381A063C1A954D032C466AE473E280253747D690CFEF400DF3A9865A0A2332534C9486337D37750030B504D201B9A4CD00349A693400D34CA0061A66706988E37C49A53ACAA912B7D9AE1FEFF00643585A9C80C9B47DD5E05509196CD519A4511D3734C06E692800A5A007D25049FFFD9";//picdata="data:image/jepg;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAADAFBMVEUAAAAAAACAgIBVVVWAgICZmZmAgICSkpKAgICOjo6ZmZmLi4uVlZWJiYmSkpKZmZmPj4+WlpaOjo6UlJSZmZmSkpKXl5eQkJCVlZWZmZmTk5OXl5eSkpKVlZWZmZmUlJSXl5eTk5OWlpaZmZmVlZWYmJiUlJSWlpaZmZmVlZWYmJiUlJSXl5eZmZmWlpaYmJiVlZWXl5eZmZmWlpaYmJiVlZWXl5eZmZmWlpaYmJiVlZWXl5eZmZmWlpaYmJiWlpaXl5eZmZmXl5eYmJiWlpaYmJiZmZmXl5eYmJiWlpaYmJiZmZmXl5eYmJiWlpaYmJiZmZmXl5eYmJiXl5eYmJiZmZmXl5eYmJiXl5eYmJiZmZmXl5eYmJiXl5eYmJiZmZmXl5eYmJiXl5eYmJiZmZmXl5eZmZmXl5eYmJiZmZmYmJiZmZmXl5eYmJiZmZmYmJiZmZmXl5eYmJiZmZmYmJiZmZmXl5eYmJiZmZmYmJiZmZmXl5eYmJiZmZmYmJiZmZmXl5eYmJiZmZmYmJiZmZmXl5eYmJiZmZmYmJiZmZmYmJiYmJiZmZmYmJiZmZmYmJiYmJiZmZmYmJiZmZmYmJiYmJiZmZmYmJiZmZmYmJiYmJiZmZmYmJiZmZmYmJiYmJiZmZmYmJiZmZmYmJiYmJiZmZmYmJiZmZmYmJiYmJiZmZmYmJiZmZmYmJiYmJiZmZmYmJiZmZmYmJiYmJiZmZmYmJiZmZmYmJiYmJiZmZmYmJiZmZmYmJiYmJiZmZmYmJiZmZmYmJiYmJiZmZmYmJiZmZmYmJiYmJiZmZmYmJiZmZmYmJiZmZmZmZmYmJiZmZmYmJiZmZmZmZmYmJiZmZmYmJiZmZmZmZmYmJiZmZmYmJiZmZmZmZmYmJiZmZmYmJiZmZmZmZmYmJiZmZmYmJiZmZmZmZmYmJiZmZmYmJiZmZmZmZmYmJiZmZmYmJiZmZmZmZmYmJiZmZmYmJiZmZmZmZmYmJiZmZmYmJiZmZmZmZmYmJiZmZmYmJiZmZmZmZmby3gIAAAA/3RSTlMAAQIDBAUGBwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMkJSYnKCkqKywtLi8wMTIzNDU2Nzg5Ojs8PT4/QEFCQ0RFRkdISUpLTE1OT1BRUlNUVVZXWFlaW1xdXl9gYWJjZGVmZ2hpamtsbW5vcHFyc3R1dnd4eXp7fH1+f4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS09TV1tfY2drb3N3e3+Dh4uPk5ebn6Onq6+zt7u/w8fLz9PX29/j5+vv8/f7rCNk1AAAPHklEQVQYGeXBd2BUVaIG8G/SIDFICy1ABJSWBAugIkOzrrC6locsT3RV9KGuvUAQQhWwUgVEdGVdlbeI2EAUBaKoiOLqqoBAEAQVpScgkMTMfPt8nklukrlzztxz7s0f9/cDfQ70OdDnQJ8DfQ70OdDnQJ8DfQ70OdDnQJ8DfQ70OdDnQJ8DfQ70OdDnQJ8DfQ70OdDnQJ8DfQ70OdDnQJ8DfQ70OdDnQJ8DfQ70OdDnQJ8DfQ70OdDnQJ8DfQ70OdDnQJ8DfQ6sLcXf//jT3v1FJaxdoNfKNy0cftnZbVIhBFIbZZ5+yS2T/r6mmLUA9FJZQd7ZqbATaHflxDeP0FugZw7Ov6IepJJ7T/y4nN4BvVH+1qA6UNVo2PthegT0wp78TMQnK28jPQG6b8dtqXDgohX0AOi2wmuT4FDus6V0G+iuovtSoKHNi2G6C3RT+dwMaOq6iq4CXfT5aTBgwHd0EeiasrFJMCJ9dpiuAd3yxWkwpvdWugV0ydwUGJT6DF0CuuLoNTBs6HG6AnTD1i4w7oztdAPogoIGUJMx6K+XnQBFDQvoAtC8f9aBmmtLSR46F4rqLKF5oHHTAlBzfZi/KTkPihLm0TjQtBFQ1Oggf7clGaoepGmgYXlQNZURt0PZFBoGmpUPVU2PMuKHFCibQ7NAo8ZD2eOsdDuUBV6gUaBJc6Asp4yVDjWDsqRlNAk0aHkiVAXW0OoFqDvxGxoEmvPvelB2A6s6H+o6FtMc0JjdraCs8X5WtaUO1F0apjGgKeX9oO5vrG4c4jCexoCmjIG6XmFWV9Ie6hI/pimgISsToKz+Vta0EnHocIyGgGbsbQZlgdcZzSjE4Q4aApoxGOrGMKpQf6gLrKIZoBHLoK5/iNEdOgXqTi6hEaAJh1tDWbuDrPD5+fX7fsgKG9Kh7mEaAZpwJ5SlfckKb6QASF7ACi9DXb2faQJowNYkqKq7ghXWpOA3CUtYYRTUDaUJoAEDoSr1HVbY1RS/S/2YEaFroSzhXzQA1LcOqlJXssIvpyOiyTZGhP4Hyi6lAaC+flCUtooVwleiUof9rHAXVAW+oj5Q26dQlLaalfJhFSxhhZFQNZj6QG2Doab1p6y0EFUNCrPCRChK3EptoK5dSVBy4T5W+rQuqhnBStMSoeYmagN1jYCKQH6IlbY0Rw1zWen9VlCSWkRdoKZQCyhouIwW37RATYHZrHTgciiZQ12gppVQ0Hs7LT";picdata = picdata.replaceAll(" ", "+");//将字符串的空格用+替换,这句话我一共摸索了五天时间才搞定，否则不能出图，注释之后就不行了application.setAttribute("data", picdata);//将base64图片信息保存到application  4//刷新页面显示表单提交的base64图片System.out.println(name1+"存入图片数据"+picdata);request.setAttribute("data", picdata);response.getWriter().println(picdata);//这个是不刷新页面,异步显示后台写好的base64字符串data1="``````";不能显示表单提交的字符串，用第二个异步表单提交//request.setAttribute("data", picdata);//request.getRequestDispatcher("index.jsp").forward(request, response);// 重定向页面到登录页面,这个是刷新页面显示表单提交的base64图片，用第一个表单提交}else{System.out.println("不通过");out.print("no");//输出生成后的聊天信息out.close();//关闭输出流//request.setAttribute("name", "no");//request.getRequestDispatcher("index.jsp").forward(request, response);// 重定向页面到登录页面}}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stub//System.out.println("doPost"+request.getParameter("name"));System.out.println("进入post方法");response.setContentType("text/html;charset=UTF-8");//设置响应内容和编码方式String user=request.getParameter("name");//昵称String speak=request.getParameter("QOS");//说话内容System.out.println(user+"say:"+speak);//在这里把图片信息存入applicationServletContext application = config.getServletContext();//3speak = speak.replaceAll(" ", "+");//将字符串的空格用+替换,这句话我一共摸索了五天时间才搞定，否则不能出图，注释之后就不行了application.setAttribute("data", speak);//将base64图片信息保存到application  4//刷新页面显示表单提交的base64图片System.out.println(user+"存入图片数据"+speak);response.setContentType("text/html;charset=UTF-8");//设置响应内容和编码方式response.setHeader("Cathe-Control", "no-cathe");//禁止页面缓存PrintWriter out = null;        try {out = response.getWriter();//获取输出流对象out.print(user+" say: "+speak);//输出生成后的聊天信息out.close();//关闭输出流} catch (IOException e) {e.printStackTrace();}}}

（2）准备前端代码index.jsp,前端的代码作用就是展示主页，让用户在界面上提交表单显示结果的作用。

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>daodanjishui物联网照相机系统</title>
<script type="text/javascript" >function Send_post(cmd,pass,qos){//3if(qos==""){alert("图片数据为空,请输入图片数据");form2.name1.focus();return false;}//第一种方法提交异步请求var xmlHttpReq;//1xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器  1//指明准备状态改变时回调的函数名xmlHttpReq.onreadystatechange=handlesu;//设置回调函数，函数名字是handlesu-----------2//状态发生改变时回调的函数function handlesu()//2{//准备状态为4if(xmlHttpReq.readyState==4){//响应状态码为200，代表一切正常if(xmlHttpReq.status==200){   var res = xmlHttpReq.responseText;var result2 = document.getElementById("result2");result2.innerHTML = "<font color=red>"+res+"</font>";    }}}var url = "servlet1?name="+cmd+"&password="+pass+"&QOS="+qos+"&nocache="+new Date().getTime();//XP电脑运行程序出错，#号不能传输，改为,号//xmlHttpReq.open("get",url,true);//3xmlHttpReq.open("post",url,true);//3//向服务器发送请求xmlHttpReq.send(null);//3// var result2 = document.getElementById("result2");// result2.innerHTML = "<font color=red>"+count+"</font>";//第二种方法提交异步请求}function Send_get(cmd,pass,qos){//3if(qos==""){alert("图片数据为空,请输入图片数据");form2.name1.focus();return false;}//第一种方法提交异步请求var xmlHttpReq;//1xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器  1//指明准备状态改变时回调的函数名xmlHttpReq.onreadystatechange=handlesu;//设置回调函数，函数名字是handlesu-----------2//状态发生改变时回调的函数function handlesu()//2{//准备状态为4if(xmlHttpReq.readyState==4){//响应状态码为200，代表一切正常if(xmlHttpReq.status==200){   var res = xmlHttpReq.responseText;var result2 = document.getElementById("result2");result2.innerHTML = "<font color=red>"+res+"</font>";  }}}var url = "servlet1?name="+cmd+"&password="+pass+"&QOS="+qos+"&nocache="+new Date().getTime();//XP电脑运行程序出错，#号不能传输，改为,号xmlHttpReq.open("get",url,true);//3//xmlHttpReq.open("post",url,true);//3//向服务器发送请求xmlHttpReq.send(null);//3// var result2 = document.getElementById("result2");// result2.innerHTML = "<font color=red>"+count+"</font>";//第二种方法提交异步请求}function checkCmd(cmd)
{   if(cmd==""){alert("图片数据已经为空,请输入图片数据");form2.name1.focus();return false;}else form2.QOS.value="";//将输入框的内容清空}$(document).ready(function(){//网页框架加载完毕之后就调用这个函数var n = document.getElementById('a').value;
});</script></head>
<body><form action="servlet1" method="get"><table align="center" width="450"><tr><td align="center" colspan="2"><h2>物联网ESP32CAM局域网图传通信测试</h2><hr></td></tr><tr><td align="right">name：</td><td><input type="text" name="name" value="sususu" /></td></tr><tr><td align="right">password：</td><td><input type="password" name="password" value="123456"/></td></tr><tr><td align="right">质         量：</td><td><input type="text" name="QOS" value="0" /></td></tr><tr><td align="center" colspan="2"><input type="submit" value="查看图片"><!-- <a href="FindServlet">查看农业数据</a> --> </td></tr></table></form><%String name=(String)request.getAttribute("name");String admin=(String)request.getAttribute("admin");String password=(String)request.getAttribute("password");String data =(String)request.getAttribute("data");String anwser=(String)request.getAttribute("anwser");String picname=(String)request.getAttribute("picname");   %><tr align="center"><td><%="result="+name+"admin="+admin+"password="+password%></td> <td><%="data="+data%></td><td><input type="hidden" name="test" id="a" value="<%=name%>"/></td><tr align="center"> <td><%=" anwser= "+anwser%></td><br><span id="result2"></span>  </tr><form name="form2" action="" method=""><table align="center" width="450"><tr><td align="center" colspan="2"><h2>异步传图请求</h2><hr></td></tr><tr><td align="right">name：</td><td><input type="text" name="name1" value="susususu" /></td></tr><tr><td align="right">password：</td><td><input type="password" name="password" value="123456"/></td></tr><tr><td align="right">base64 picture：</td><td><input type="text" name="QOS" value="" /></td></tr><tr><td align="center" colspan="2"><input name="button1" type="button" value="清空图片数据" onclick="checkCmd(form2.QOS.value)" >                                              <input name="button2" type="button" class="btn_orange" value="post存入图片" onClick="Send_post(form2.name1.value,form2.password.value,form2.QOS.value)"> <input name="button3" type="button" class="btn_orange" value="get存入图片" onClick="Send_get(form2.name1.value,form2.password.value,form2.QOS.value)"></td></tr></table></form><form action="SuServlet" method="get" onsubmit=""><table align="center" width="450">           <tr><td align="center" colspan="2"><h2>daodanjishui简易Servlet娱乐计算器</h2><hr></td></tr><tr><td><input type="text" name="firstNum"><select name="operator"><option value="-1">运算符</option><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><input type="text" name="secendNum"><input type="submit" value="计算"></td></tr></table></form><table align="center" width="450">                            <tr><td align="center" colspan="2"><tr><td align="center" colspan="2"><h2>计算器图片显示和物联网ESP32CAM图传显示</h2><hr></td></tr><td height="29" align="center"><img src="images/<%=picname%>.jpg" width="300" height="400">          </td><td height="29" align="center"><img src="<%=data%>"  id="show" width="300" height="400">          </td></td></tr></table></body>
</html>

（3）代码组合，前端和后端代码组合到一个工程里面最后就可以进行调试了，至于怎么组合，请读者到其他地方学习了，我写的代码是一个工艺品，而不是一个样品。所以细节都省略很多了，基础教程不想写太多，展现技术创新才是我的主流。
对于不想组合工程的读者，我专门提供了下载源码工程的渠道，请到博文最后获取下载链接。

三、运行与调试

（1）运行源码，下面是运行的总效果图：

（2）上面就是部署服务器之后显示的谷歌浏览器显示计算结果answer=2.0，显示图片2.jpg的效果图，这次的界面比上一个项目的要多了一个异步提交请求的表单输入框，网页的布局也经过精心布局，至少完成对称性的美化，需要的用户名和密码我都在jsp网页上写好了，买家可以自行去掉，我是为了调试方便才写好的，读者至少在这里学会不用数据库也能实现后台密码验证的技术，去掉之后就要自己手动输入了。账号和密码错误是不能上传图片和查看图片的。

（3）上面就是查看别人通过输入账号和密码在“异步传图请求”那里上传的图片，查看图片的时候，点击“查看图片”按钮即可，不需要自己手动刷新网页，当然刷新也可以。读者在这可以学习到如何显示图片。

（4）上面就是其他客户端使用服务器主页上传图片的方案，在异步传图请求那里提交base64图片数据，上传成功会有红色字体显示图片数据再主页上的，这是上一版代码没有的功能。读者在这里可以学习到如何异步刷新局部网页显示红色反馈数据的技术。

（5）上面就是用专用post请求提交软件上传ESP32CAM130万高清摄像头拍摄的大图片，当然图片我是提前拍摄存储好的，格式是jpeg，在Post Data：输入框可以看到图片的编码信息，也可以看得出来图传的格式是由我自己确定的，服务器也是按照我制定的格式来接收图片信息的，所以买家在用软件发送图片的时候要按照我制定的用户名和密码去发送，软件收到OK说明上传图片成功了。用post方式来发送信息好处有个：1、信息长度不受限制，上个项目用get请求只能发送小图。2、通信过程不被别人看到，如果是发送get请求是可以在浏览器网址输入框看到账号和密码的。3、当需要传输的参数很多的时候就很方便，读者可以看到我是如何发送多个参数的，并且学习到如何将图片信息渗透到post请求当中，并通过网络传输给服务器。

（6）上面就是客户端点击“查看图片”显示高清图片的效果，可以看出来图片的格式是jpeg，再也不是png了，黑色的一长串数据就是高清大图的编码信息，读者可以拷贝到图片查看器去验证是不是真的。这个时候客户端并没有上传图片，所以是看不到红色字体的，红色字体是上传者才能看到的。所以归纳一下过程：第一个客户端模拟ESP32通过软件发送post请求上传高清大图，第二个客户端在谷歌浏览器登录服务器主页点击“查看图片”看到第一个客户端上传的图片。读者可以在这里学到不用数据库和硬盘如何实现服务器存储图片数据和分发图片数据给客户端，并且学会如何实现客户端与服务器交互。

调试到此结束，根据结果可以满足博文提出的要求。

总结

总结：这个软件的界面写得非常人性化，专为DIY设计人员量身定做的，比如还有一些功能我没有演示，比如账号为空报错、清空图片信息、表单发送get请求、表单异步发送post请求、这些代码用的都是底层的jsp技术，java技术，没有套用任何框架，也没有使用任何包，可以说是学习JSP技术和图传技术和JAVA技术的一个好材料。那个servlet计算器根据计算结果显示图片的技术不知道有多少人想写都难写得出来！软件的功能，程序逻辑和测试由daodanjishui独家设计，说实话不是那么容易一个人原创设计出来的，别人抄也难抄全，因为我会更新项目进度加入新的功能，做成一个系列，如果有好创意的买家，也可以私聊我，如果您的创意足够强大，我可以免费帮您写代码，只有我想不出来的点子，很难有我写不出的代码。下一期将会实现ESP32CAM照相机拍摄图片共享给所有连上服务器的用户，自动更新照片，这个项目不是物联网照相机系统的终点站，精彩值得期待······

代码工程下载链接：https://www.cirmall.com/circuit/24139/
点我直接跳转
提交post请求的软件名字叫：TestHttpPost.exe读者自己去下载吧

最简单DIY基于ESP32CAM的物联网相机系统③（在JSP服务器图传相片给所有客户端欣赏）相关推荐

最简单DIY基于ESP32CAM的物联网相机系统⑥（用上位机VS2013 MFC实现WIFI图传）
第一篇:最简单DIY基于ESP32CAM的物联网相机系统①(用网页实现拍照图传) 第二篇:最简单DIY基于ESP32CAM的物联网相机系统②(在JAVAWEB服务器实现图片查看器) 第三篇:最简单DI ...
最简单DIY基于ESP32CAM的物联网相机系统②（在JAVAWEB服务器实现图片查看器）
最简单DIY基于ESP32CAM的物联网相机系统系列文章目录第一篇:最简单DIY基于ESP32CAM的物联网相机系统①(用网页实现拍照图传) 第二篇:最简单DIY基于ESP32CAM的物联网相机系统 ...
最简单DIY基于ESP32CAM的物联网相机系统⑤（用C#上位机实现串口图传）
第一篇:最简单DIY基于ESP32CAM的物联网相机系统①(用网页实现拍照图传) 第二篇:最简单DIY基于ESP32CAM的物联网相机系统②(在JAVAWEB服务器实现图片查看器) 第三篇:最简单DI ...
最简单DIY基于ESP32CAM的物联网相机系统④（用调试串口助手实现串口图传）
第一篇:最简单DIY基于ESP32CAM的物联网相机系统①(用网页实现拍照图传) 第二篇:最简单DIY基于ESP32CAM的物联网相机系统②(在JAVAWEB服务器实现图片查看器) 第三篇:最简单DI ...
最简单DIY基于ESP32CAM的物联网相机系统⑤(用1306OLED实现WIFI黑白屏照相机)
第一篇:最简单DIY基于ESP32CAM的物联网相机系统①(用网页实现拍照图传) 第二篇:最简单DIY基于ESP32CAM的物联网相机系统②(在JAVAWEB服务器实现图片查看器) 第三篇:最简单DI ...
最简单DIY基于ESP8266的物联网智能小车①（webserver服务器网页简单遥控版）
ESP8266和ESP32物联网智能小车开发系列文章目录第一篇:最简单DIY基于ESP8266的物联网智能小车①(webserver服务器网页简单遥控版) 文章目录 ESP8266和ESP32物联网 ...
最简单DIY基于STM32的远程控制电脑系统②（无线遥杆+按键控制）
STM32库函数开发系列文章目录第一篇:STM32F103ZET6单片机双串口互发程序设计与实现第二篇:最简单DIY基于STM32单片机的蓝牙智能小车设计方案第三篇:最简单DIY基于STM32F ...
最简单DIY基于STM32的远程控制电脑系统①（电容触摸+按键控制）
STM32库函数开发系列文章目录第一篇:STM32F103ZET6单片机双串口互发程序设计与实现第二篇:最简单DIY基于STM32单片机的蓝牙智能小车设计方案第三篇:最简单DIY基于STM32F ...
最简单DIY基于STM32单片机的WIFI智能小车设计方案
STM32库函数开发系列文章目录第一篇:STM32F103ZET6单片机双串口互发程序设计与实现第二篇:最简单DIY基于STM32单片机的蓝牙智能小车设计方案第三篇:最简单DIY基于STM32F ...

最简单DIY基于ESP32CAM的物联网相机系统③（在JSP服务器图传相片给所有客户端欣赏）