回顾分页,学习文件上传(提交表单、图片回显)

1 回顾分页

分析:实现分页效果
(1) 每页都有固定条数的数据显示,也存在最后一页数据条数可能不够
a、查询数据的起始下标
b、当前的页码数
(2) 需要有一个分页的显示条
a、总数据条数
b、每页要显示的条数
c、总条数%每页的条数==0?总条数/每页的页数:(总条数/每页的页数+1)
(3) 前台展示
a、返回的数据
b、当前的页码数
c、总页数:总数据条数、每页要显示的数据条数
分页三种实现方式:
(1)使用El表达式+jstl+servlet+mysql+jdbc+html+css+tomcat实现分页操作
(2)ajax+servlet+json+mysql+jdbc+html+css+tomcat实现
(3)layui+servlet+json+mysql+jdbc+html+css+tomcat+jQuery实现

2 文件上传

2.1 要求:

(1)表单中必须满足multipart/form-data类型
(2)表单中的请求类型必须是POST
(3)需要的jar:commons-FileUpload.jar commons-IO.jar

ServletFileUpload			parseRequest解析请求(表单数据)	List<FileItem>
							使用表单提交时,所有的数据都在request对象中的
							
FileItem					getName()		获取表单中type类型为file的字段上传的文件名
							getString()		获取除了文件上传字段的其他字段值
							getFieldName()	获取表单name属性的值	
							getSize()		获取上传文件的大小(字节)						
							isFormField()	是普通字段返回true,文件上传字段返回false
							write()			指定文件保存的地址
							
FileItemFactory				用于生产FileItem

ServletFileUpload			需要通过parseRequest之后拿到FileItem的一个集合

指定上传图片的类型
	1、需要一个指定类型的数组或者集合 {".png",".jpg",".gif",".ico"}
	2、获取到当前上传的文件的后缀名
		对获取到的文件名进行截取
			a、文件名是字符串
			b、后缀名一定是在文件名的最后
		注意:文件名中可能存在多个点,从后往前找,第一个点就是
		例如:xxxx.txt.png.substring(最后一个点的下标,字符串的长度)

上传文件大小限制
	1、获取上传的文件的大小
	2、设置能够上传的文件的大小
	3、给个处理方式


将上传的图片存储到服务器中
	1、先获取到上传的文件的名字---改名---保证存储时的图片名字是不一致的
		a、用当前的时间戳作为名字的一部分
		b、生成随机值作为名字的一部分--UUID
	2、找到要存储的位置---在服务器中的位置---tomcat
	3、将图片写入到指定的位置
	4、在前台页面将图片回显

	修改项目或重启后,发现在服务器中存储的图片不见了----原因是每次重启服务器后,项目会被重新部署,原来的就会被覆盖
		将图片单独存储到服务器上
			可以是一个图片服务器
			如果服务器是一台电脑,就可以将电脑中的某个文件夹作为图片存储的位置

3 具体代码

前端代码
1.提交表单

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="control.jsp" method="post" enctype="multipart/form-data">
		username:<input type="text" name="uname"><br>
		password:<input type="password" name="pwd"><br>
		fileUpload:<input type="file" name="file">
			<span style="color:gray">${picType }</span>
			<span style="color:gray">${sizeLimit }</span><br>
		<input type="submit" value="submit">
	</form>
	<c:remove var="picType"/>
	<c:remove var="sizeLimit"/>
</body>
</html>

2 图片回显

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<%
		String path = request.getContextPath()+"/fileupload/";
	%>
	图片回显
	<hr>
	<img src="<%=path %>${picName }"/>
</body>
</html>

后台代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="org.apache.commons.fileupload.FileItemFactory,org.apache.commons.fileupload.disk.DiskFileItemFactory" %>
<%@ page import="org.apache.commons.fileupload.servlet.ServletFileUpload,java.util.Date" %>
<%@ page import="java.util.List,org.apache.commons.fileupload.FileItem,java.util.Arrays,java.io.File" %>
<%
	//设置字符编码
	request.setCharacterEncoding("utf-8");
	//1、获取到FileItem的工厂对象
	FileItemFactory factory = new DiskFileItemFactory();
	//2、获取表单中的数据ServletFileUpload.parseRequest
	ServletFileUpload servletFileUpload = new ServletFileUpload(factory);
	//设置上传文件的大小
	servletFileUpload.setSizeMax(1024*1024);//大小为1M
	try{
		//3、解析request请求
		List<FileItem> fileItemList = servletFileUpload.parseRequest(request);
		//4、遍历集合,拿到对应的FileItem对象
		if(null != fileItemList){
			String uname = "",upwd = "",fileName = "";
			long fileSize = 0;
			for(FileItem fileItem : fileItemList){
				//5、判断当前字段的类型
				if(fileItem.isFormField()){//true 代表普通字段
					String fieldName = fileItem.getFieldName();
					if("uname".equals(fieldName)){
						uname = fileItem.getString("utf-8");
					}else if("pwd".equals(fieldName)){
						upwd = fileItem.getString();
					}
				}else{//false 文件上传的字段
					fileName = fileItem.getName();
					fileSize = fileItem.getSize();
					//指定上传的文件类型
					String[] picSuffixs = {".png",".jpg",".gif",".ico"};
					//获取文件的后缀名
					String fileSuffix = fileName.substring(fileName.lastIndexOf("."),fileName.length());
					//判断该文件的后缀名是否符合给定的文件类型
					List<String> picList = Arrays.asList(picSuffixs);
					if(!picList.contains(fileSuffix)){
						session.setAttribute("picType", "只能上传"+picList);
						response.sendRedirect("fileUpload.jsp");
						return;
					}
					//将上传的图片存储到服务器中
					String newFileName = (new Date().getTime())+fileSuffix;
					//tomcat中的存储位置
					String filePath = request.getServletContext().getRealPath("/fileupload/");
					//将图片写入到指定的地址中
					fileItem.write(new File(filePath,newFileName));
					session.setAttribute("picName", newFileName);
					response.sendRedirect("show.jsp");
				}
			}
		}
	}catch(org.apache.commons.fileupload.FileUploadBase.SizeLimitExceededException e){
		session.setAttribute("sizeLimit", "图片大小不能超过"+servletFileUpload.getSizeMax()/1024+"kb");
		response.sendRedirect("fileUpload.jsp");
		return;
	}
	
	
%>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值