先看效果

这里的头像就是通过查询数据库里存的图片的地址显示的

数据库中就会多出地址

提交之后，在管理员页面或者查看个人信息页面就能看到
原理：通过文件上传的方式将图片的地址上传到数据库，其他jsp页面查询数据库时通过地址直接显示图片
所需的jar包：

jsp页面（部分）：

                <form action="${pageContext.request.contextPath}/addInfoma" method="post" enctype="multipart/form-data">
                    <div class="modal-body">
                        <ul>
                            <li style="display: none">
                                <label><span>报修人id:</span></label>
                                <input type="text" name="r_id" value="${r_id}">
                            </li>
                            <li>
                                <label><span>报&nbsp;修&nbsp;人&nbsp;: </span></label>
                                <input style="display: none" type="text" name="r_name" value="${r_name}" >
                                <input disabled="disabled" type="text" value="${r_name}">
                            </li>
                            <li>
                                <label><span>宿&nbsp;舍&nbsp;号&nbsp;: </span></label>
                                <input style="display: none" type="text"name="r_address" value="${r_address}">
                                <input disabled="disabled" type="text" value="${r_address}">
                            </li>
                            <li>
                                <label style="vertical-align: top"><span>故障描述:</span></label>
                                <textarea type="text" onblur="gz()" id="f_description" name="f_description" style="resize:none;" ></textarea>
                            </li>
                            <li>
                                <label><span>图片上传: </span></label>
                                <input  type="file" name="img_url">
                            </li>
                            <script src="static/js/jquery-1.11.3.js"></script>
                            <script>
                                function gz(){
                                    let reg = /^[^\s]+[\s]*.*$/
                                    if(!reg.exec($("#f_description").val())){
                                        alert('请输入合法的故障描述')
                                        $("#f_description").val('');
                                    }
                                }
                            </script>
                        </ul>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary btn-sm">提交申请</button>
                    </div>
                </form>

注意：form表单要设置，图片上传的input的type属性为file，给这个input设置name，表单提交那里要设置enctype=“multipart/form-data”

Servlet代码：（上传图片的）

//设置ContentType字段值
            response.setContentType("text/html;charset = utf-8");

            // FileItem 是表单中的每一个元素的封装
            // 创建一个 FileItem 的工厂类
            FileItemFactory factory = new DiskFileItemFactory();
            // 创建一个文件上传处理器（装饰设计模式）
            ServletFileUpload upload = new ServletFileUpload(factory);
            // 解析请求
            List<FileItem> items = upload.parseRequest(request);
            System.out.println(items);

            for (FileItem item : items) {
                // 判断文件类型
                if (item.isFormField()) {
                    // 文本类型
                    String filename = item.getFieldName();
                    if (filename.equals("r_id")){
                        String id = item.getString("UTF-8");
                        r_id=Integer.parseInt(id);
                        System.out.println(r_id);
                    }
                    if (filename.equals("r_name")){
                        r_name = item.getString("UTF-8");
                        System.out.println(r_name);
                    }
                    if (filename.equals("r_address")){
                        r_address = item.getString("UTF-8");
                        System.out.println(r_address);
                    } if (filename.equals("f_description")){
                        f_description = item.getString("UTF-8");
                        System.out.println(f_description);
                    }
//                    if (filename.equals("user")) {
//                        name = item.getString("UTF-8");
//                        System.out.println(name);
//                    }
                } else {
                    // 文件类型
                    // 获取文件后缀名
                    String imgtype = item.getName().substring(item.getName().lastIndexOf("."));
                    // 给文件重新命名防止重复
                    String imgName = UUID.randomUUID() + imgtype;
                    System.out.println();
                    String path="E:\\TempFolder";
                    // 将上传的文件保存到服务器
                    item.write(new File(path, imgName));

                    // 把服务器中的路径添加到数据库中
                    String sqlPath=null;
                    sqlPath = "TempFolder/" + imgName;
                    img_url=sqlPath;
                    System.out.println(img_url);
                    System.out.println("访问路径：" + sqlPath);
                    // 将路径保存到数据库

                }
            }

需要注意的是

这里的if else语句是因为我们设置了文件上传的这个表单，servlet无法通过request.getParameter("");通过name获取到值，所以要在这里遍历比较拿到我们的值，不要忘了在外面初始化参数

记得数据库中img_url是varchar类型的
接下来在Tomcat里配置一下


点他的时候下面是能看到的，还要注意上面的虚拟路径只用斜线就行了，免得图片到时候显示不出来

存数据库就是把img_url当做普通的varchar类型的存进去就行了，查看数据库也是，在jsp显示页面img的src写成数据库的img_url值就行了

  <td><img class="fd" width="100px" height="100px" src="${infomation.img_url}"/></td>

附赠一个点击图片放大，再点一次缩小的js代码：

<script>
                            $(".fd").bind("click",function(){
                                var a=1
                                console.log(a)
                                var width = $(this).width();
                                if(width==100){
                                    $(this).width(300);
                                    $(this).height(300);
                                }
                                else {
                                    $(this).width(100);
                                    $(this).height(100);
                                }

                            });
                        </script>

别忘了前面导入jQuery的包

演示一个更改头像的demo：