【JSP实现图片上传并保存到数据库】

JSP实现图片上传并保存到数据库

开发工具与关键技术：Eclipse Java
撰写时间：2020年9 月 28 日

今天分享一个jsp页面图片上传的案例demowebs

准备工作： 准备依赖包：commons-fileupload-1.3.2.jar、commons-io-2.5.jar，并将准备的包存放在/项目名称/WebContent/WEB-INF/lib文件夹中。

接着在jsp页面添加form表单，表单用post提交，注意 enctype 属性值还要设置为enctype="multipart/form-data"，在上传单个文件的时候，应该使用单个带有属性type="file" 的 <input .../> 标签。有些时候为了允许多个文件上传，就会用多个name属性值不同的input标签来实现，输入标签具有不同的名称属性的值，浏览器会为每个input标签关联一个【浏览】按钮。

jsp代码：

   <div class="col-md-12">
	        	<div class="col-md-6 col-md-offset-3">
	        		<form id="formUserInsert" action="${ctx}/servlet/usersServlet?fun=doInsert" class="form-horizontal form-radius" method="post" enctype="multipart/form-data">
	                    <input type="reset" name="reset" style="display: none;"/>
	                    <div class="form-group form-group-sm">
	                        <label class="control-label col-sm-3" for="userName">用户名</label>
	                        <div class="col-sm-9">
	                            <input type="text" class="form-control" id="userName" name="userName">
	                        </div>
	                    </div>
	                    <div class="form-group form-group-sm">
	                        <label class="control-label col-sm-3" for="password">密码</label>
	                        <div class="col-sm-9">
	                            <input type="text" class="form-control" id="password" name="password">
	                        </div>
	                    </div>
	                    <div class="form-group form-group-sm">
	                        <label class="control-label col-sm-3" for="userTypeId">用户类型</label>
	                        <div class="col-sm-9">
	                            <select class="form-control" id="userTypeId" name="userTypeId" >
	                            	<c:forEach items="${userTypes}" var="userType">
	                            		<option value="${userType.userTypeId}">${userType.userType}</option>
	                            	</c:forEach>
	                            </select>
	                        </div>
	                    </div>
	                    <div class="form-group form-group-sm">
	                        <label class="control-label col-sm-3" for="sex">性别</label>
							<div class="col-sm-9">
								<select class="form-control" id="sex" name="sex">
									<option value="true">男</option>
									<option value="false">女</option>
								</select>
							</div>
						</div>
	                    <div class="form-group form-group-sm">
	                        <label class="control-label col-sm-3" for="age">年龄</label>
	                        <div class="col-sm-9">
	                            <input type="text" class="form-control" id="age" name="age">
	                        </div>
	                    </div>
	                    <div class="form-group form-group-sm">
	                        <label class="control-label col-sm-3" for="idNumber">身份证号</label>
	                        <div class="col-sm-9">
	                            <input type="text" class="form-control" id="idNumber" name="idNumber">
	                        </div>
	                    </div>
	                    <div class="form-group form-group-sm">
	                        <label class="control-label col-sm-3" for="picture">头像</label>
	                        <div class="col-sm-9">
	                            <input type="file" class="form-control" id="picture" name="picture">
	                        </div>
	                    </div>
	                    
	                    <div class="form-group form-group-sm">
	                        <div class="col-sm-9 col-sm-offset-4">
	                            <button type="button" class="btn btn-primary btn-sm btn-radius form-save" onclick="insert()" >新增保存</button>
	                            <button type="reset" class="btn btn-primary btn-sm btn-radius">重置表单</button>
	                            <button type="button" onclick="Return()" class="btn btn-primary btn-sm btn-radius">返回上一页</button>
	                        </div>
	                    </div>
	                </form>
	        	</div>	        	
	        </div>

实现样式如下：

Dao类：public boolean insert(T t);

DaoImpl类：

sql语句：
private String insert="insert into users(user_name,password,user_type_id,sex,age,id_number,picture) values (?,?,?,?,?,?,?);";

//新增
public boolean insert(Users t) { 
	boolean bolR=false;
	try { 
		conn=DbUtil.getConnection();
		ps=conn.prepareStatement(insert,Statement.RETURN_GENERATED_KEYS);
		ps.setString(1, t.getUserName());
		ps.setString(2, t.getPassword());
		ps.setInt(3, t.getUserTypeId());
		ps.setBoolean(4, t.getSex());
		ps.setInt(5, t.getAge());
		ps.setString(6, t.getIdNumber());
		ps.setString(7, t.getPicture());
		int i=ps.executeUpdate();
		if (i>0) { 
			bolR=true;
		}
	} catch (SQLException e) { 
		bolR=false;
		e.printStackTrace();
	}finally{ 
		DbUtil.close(conn, ps, rs);
	}	
	return bolR;
}

前面的代码比较简单一点，重点的代码是在Servlet里面，它比较麻烦的是对图片处理。

图片处理：首先是获取jsp页面的file文件，然后是构建上传路径，添加路径分隔符，判断是否已经存在或是否是文件类型，是就对文件输入流进行处理和读取然后返回文件类型关闭流，代码如下：

//图片处理
private void getUserPicture(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
	String strFileName=request.getParameter("file");//获取insert.jsp页面的file文件
	String uploadPath="H:\\Java2020MyPicture\\upload";//构建上传目录的路径
	if (Tools.isNotNull(strFileName)) { 
		File file=new File(uploadPath+File.separator+strFileName);//File.separator: 路径分隔符（ 说白了就是斜线）
		if (file.exists() && file.isFile()) { 
			FileInputStream in=new FileInputStream(file);
			ServletOutputStream out=response.getOutputStream();
			
			byte[] buf=new byte[1024];
			int count=0;
			while((count=in.read(buf, 0, buf.length))!=-1){ 
				out.write(buf, 0, count);
			}
			response.setContentType("image/png"); // 设置返回的文件类型
			out.flush();
			out.close();
			in.close();
		}
	} 
}

Tools工具类

public class Tools { 
	// 如果字符串不为空或者长度不为零返回true
	public static boolean isNotNull( String value ) { 
		if( value == null || "".equals( value.trim()) || "null".equalsIgnoreCase(value) ) { 
			return false;
		}
		return true;
	}
	
	//ISO编码转换成UTF8编码
	public static String ISOtoUTF8(String s) {  
		try {  
			s = new String(s.getBytes("iso-8859-1"), "utf-8"); 
		} catch (Exception e) {  
			
		} 
		return s; 
	}
	
	//是否为num
	public static boolean isNum(String str){ 	
		return str.matches("^[-+]?(([0-9]+)([.]([0-9]+))?|([.]([0-9]+))?)$");	
	}
}

保存代码：

//新增保存
private void doInsert(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
	JsonReturn jsonReturn=new JsonReturn();
	jsonReturn.setState(false);
	System.err.println("userName="+request.getParameter("userName"));;
	//判断请求头中是否还有 enctype="multipart/form-data"
	if (!ServletFileUpload.isMultipartContent(request)) { 
		jsonReturn.setMsg("Error:表单中必须包含enctype=\"multipart/form-data\"");
	}
	else { 
		//设置内存临界值，单个文件最大大小和请求最大值：
		int sizeThreshold=1024*1024*5;//设置内存临界值 5M
		int fileSizeMax=1024*1024*5; //设置单个文件的最大大小
		int sizeMax=1024*1024*11;//设置请求的最大大小		
		
		DiskFileItemFactory factory=new DiskFileItemFactory();
		//当文件超过设置的值时就写入到临时文件夹，否则就保存在内存
		factory.setSizeThreshold(sizeThreshold);
		//设置DiskFileItemFactory的临时文件夹   (//java.io.tmpdir 代表系统的temp目录 )
		factory.setRepository(new File(System.getProperty("java.io.tmpdir")));
		
		ServletFileUpload upload=new ServletFileUpload(factory);
		upload.setHeaderEncoding("utf-8");//设置编码
		upload.setFileSizeMax(fileSizeMax);//设置单个文件的最大大小
		upload.setSizeMax(sizeMax);//设置请求的最大大小	

		String uploadPath="H:\\Java2020MyPicture\\upload";//构建上传目录的路径  E:\\Teaching\\2016Grade Java\\upload
		//如果目录不存在就创建
		File uploadDir=new File(uploadPath);
		if (!uploadDir.exists()) { 
			uploadDir.mkdir();
		}
		Users users=new Users();
		try { 
			List<FileItem> fileItems= upload.parseRequest(request);
			for (FileItem fileItem : fileItems) { 
				//判断fileItem是不是表单元素
				if (fileItem.isFormField()) { //（非文件）处理
					InputStream in= fileItem.getInputStream();
					InputStreamReader reader=new InputStreamReader(in,"utf-8");//字节转字符
					BufferedReader bfReader=new BufferedReader(reader);//缓冲字符输入流
					String strValue=bfReader.readLine();//读取到的一行内容放到一个字符串变量中，返回str类型。
					String fieldName=fileItem.getFieldName();//获取字段名称
					
					if ("userName".equals(fieldName)) { 
						users.setUserName(strValue);
					}else if ("password".equals(fieldName)) { 
						strValue=MD5Util.getMD5(strValue);//MD5加密密码
						users.setPassword(strValue);
					}else if ("userTypeId".equals(fieldName)) { 
						if (Tools.isNum(strValue)) { 
							users.setUserTypeId(Integer.parseInt(strValue));
						}
					}else if ("sex".equals(fieldName)) { 
						users.setSex(Boolean.parseBoolean(strValue));
					}else if ("age".equals(fieldName)) { 
						if (Tools.isNum(strValue)) { 
							users.setAge(Integer.parseInt(strValue));
						}
					}else if ("idNumber".equals(fieldName)) { 
						users.setIdNumber(strValue);
					}
					
				} else { //文件处理
					if ("picture".equals(fileItem.getFieldName())) { 
						//获取原来的扩展名
						String oldName=new File(fileItem.getName()).getName();
						String extensionName=".jpg";
						//获取扩展名称
						if ((oldName != null) && (oldName.length() > 0)) {    
				            int dot = oldName.lastIndexOf('.');   
				            if ((dot >-1) && (dot < (oldName.length() - 1))) {    
				            	extensionName= oldName.substring(dot);   
				            }   
				        } 
						//构建文件的名称
						String fileName =System.currentTimeMillis()+"_"+System.nanoTime()+extensionName;
						String filePath=uploadPath+File.separator+fileName;
						//保存文件
						try { 
							fileItem.write(new File(filePath));
						} catch (Exception e) { 
							e.printStackTrace();
						}
						users.setPicture(fileName);
					}
				}
			}
			//调用Service保存数据
			users.setOpDatetime(new Date());
			boolean bolS=userService.insert(users);//insert   DaoImpl的新增实现
			if (bolS) { 
				jsonReturn.setState(true);
				jsonReturn.setMsg("新增成功");
			} else { 
				jsonReturn.setMsg("新增失败");
			}
		} catch (FileUploadException e) { 
			e.printStackTrace();
			jsonReturn.setMsg("服务器异常，请稍后再试");
		}
		JSONObject jsonObject=JSONObject.fromObject(jsonReturn);
		System.out.println(jsonObject.toString());
		
		PrintWriter out=response.getWriter();
		out.write(jsonObject.toString());
		out.close();
	}
}

实现样式如下：