JSP+JavaBean+servlet结构中怎么在后台上传图片后在前端显示？

这段时间要写一份web的大作业，老师要求是要采用JSP+JavaBean+servlet的结构写一个简单的电商网站，现在我比较纠结的就是怎么把图片和内容以列表的形式呈现在前端？
因为有后台的操作，所以不可能所以的图片直接就把其在工程中的相对地址存到数据库中，所以在想在后台时有一个可以上传图片的功能，然后将上传的图片保存到工程的某一文件夹中，把上传图片的相对路径存到数据库里。看了很多帖子，有说可以用fckeditor来实现的，但是好像兼容性又不是很好，也有说可以直接通过js的upload上传，所以现在也不知道应该采用哪种方式，希望各位大神能帮忙解答呀。
同时能附上代码就更好了，还有怎么实现前端的列表显示我也不是很清楚呢？

1 个解决方案

#1

这是自己以前学习的时候笔记,很久没直接使用servlet了

1.	文件上传
Jsp表单类型
	普通表单：
		<form action="" method="get" enctype="application/x-www-form-urlencoded">
	文件上传表单：
		<form action="" method="post" enctype="multipart/form-data">

自己编码获取上传文件
Jsp

<form action="${pageContext.request.contextPath }/upload" method="post" enctype="multipart/form-data">
   			用户名：<input type="text" name="username"><br/>
   			文件：<input type="file" name="file1"> <br/>
   			<input type="submit" />
   		</form>

Servlet获取上传数据：


public class UploadServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		// 获取请求数据
		//request.getQueryString();// 获取get方式提交数据--->username=tom&pwd=888
		//request.getInputStream();// 获取post方式提交数据----> InputStream
		//request.getParameter(""); // 无论post或get都可以获取请求数据

		// 获取文件表单数据
		InputStream in = request.getInputStream();
		// 转换流
		InputStreamReader inReader = new InputStreamReader(in, "UTF-8");
		// 缓冲流
		BufferedReader reader = new BufferedReader(inReader);

		// 获取所有表单数据，输出
		String str = null;
		while ((str = reader.readLine()) != null) {
			System.out.println(str);
		}

		// 关闭
		reader.close();
		inReader.close();
		in.close();

	}




Servlet输出结果：

------WebKitFormBoundaryeP2n6GV7zJqBIonn
Content-Disposition: form-data; name="username"					普通文本项
														(FileItem对象)

Tom
------WebKitFormBoundaryeP2n6GV7zJqBIonn
Content-Disposition: form-data; name="file1"; filename="a.txt"			(上传文件)文本项
														(FileItem对象)

Content-Type: text/plain

aaaaaaaaaa
bbbbbbbbbbbbbbbb
------WebKitFormBoundaryeP2n6GV7zJqBIonn—


如果获取需要的数据?
1.	截取字符串、提取需要的数据， 非常麻烦！
2.	每次获取上传数据，都需要截取字符串，麻烦！
	（对象，封装截取过程！）

文件上传组件

由于文件上传操作，在javaweb开发中经常用，所以以上步骤不用自己写，可以使用成熟上传组件, apache提供的文件上传组件：  fileupload组件

使用步骤：
1.	下载组件
2.	在项目中引入jar文件
	commons-fileupload-1.2.1.jar
	commons-io-1.4.jar


文件上传, HelloWorld
public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		// 创建上传文件项的工厂类
		DiskFileItemFactory fac = new DiskFileItemFactory();
		// 文件上传核心类对象
		ServletFileUpload upload = new ServletFileUpload(fac);

		try {
			// 把请求数据封装为 List<FileItem>
			List<FileItem> list = upload.parseRequest(request);
			// 遍历，所有的上传文件项
			for (FileItem item : list) {

				// 普通文本项
				if (item.isFormField()) {
					String fieldName = item.getFieldName();// 普通文本，名称
					String value = item.getString(); // 文本名称，对应的值
					System.out.println();
				} 

				// 上传文件项
				else {
					String name = item.getName();	// 上传文件名称a.txt,或文件路径(IE)
					String fieldName = item.getFieldName();// 文件域的名称
					//String value = item.getString();	// 上传文件内容
					String type = item.getContentType(); // 文件类型
					InputStream in = item.getInputStream(); // 上传文件文件流

					// 上传到upload目录
					String basePath = getServletContext().getRealPath("/upload");
					System.out.println(basePath);
					// 上传文件
					FileOutputStream out = new FileOutputStream(new File(basePath,name));
					byte[] b = new byte[1024];
					int len = -1;
					while ((len = in.read(b))!= -1) {
						out.write(b, 0, len);
					}
					// 关闭
					out.close();
					in.close();
				}

			}

		} catch (FileUploadException e) {
			e.printStackTrace();
		}

	}







文件上传API
|-- FileItemFactory				接口，文件上传工厂接口
|-- DiskFileItemFactory     		文件上传工厂类，实现上述接口
	fac.setRepository(file)		设置上传文件的临时目录
|-- ServletFileUpload			文件上传核心类对象
	boolean .isMultipartContent(request)     判断当前表单是否为文件上传表单
	void.setFileItemFactory(factory)		设置文件上传工厂类对象，如果在构造函数有传入，可以不调用次方法。
	void.setFileSizeMax(fileSizeMax);	设置单个文件的最大值
	void.setSizeMax(sizeMax)			设置上传文件的总最大值
	void.setHeaderEncoding(encoding)   设置上传文件的编码；
										=request.setCharacterEncoding

	List  parseRequest(request);			把上传文件封装为FileItem对象，再添加到list集合并返回!

|-- FileItem					封装了上传文件的普通文件项、上传文件项

	String getFieldName()			获取表单元素名称
	String getString()				获取表单元素名称， 对应的值
	String getName()				获取文件名称(或路径)
	String getContentType()			获取文件类型
	InputStream getInputStream()		获取上传文件文件流

	item.write(file);				写入文件
	item.delete();					删除临时文件


文件上传与下载
1.	文件上传
2.	servlet查询upload目录，保存所有文件： 保存文件全名、真正的文件名
		Map<文件全名唯一， 文件名显示用>
3.	jsp页面显示所有附件
	遍历map
4.	点击“下载”， 下载；  提交到下载servlet





1.	upload.jsp  上传页面

<form action="${pageContext.request.contextPath }/fileUpload" method="post" enctype="multipart/form-data">
   			用户名：<input type="text" name="username"><br/>
   			文件：<input type="file" name="file1"> <br/>
   			<input type="submit" />
   		</form>

2.	FileUploadServlet 文件上传servlet


/**
 * 1. 文件上传
 * @author Administrator
 *
 */
public class FileUploadServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		// 创建文件上传工厂类对象, 产生FileItem对象
		DiskFileItemFactory fac = new DiskFileItemFactory();
		// 二、设置上传文件临时目录
		String temp = getServletContext().getRealPath("/temp");
		fac.setRepository(new File(temp));

		// 创建文件上传核心类对象
		ServletFileUpload upload = new ServletFileUpload(fac);
		// 一、设置文件大小
		upload.setFileSizeMax(30*1024*1024);// 单个文件不能超过30M
		upload.setSizeMax(50*1024*1024);	// 总文件不能超过50M

		// 三、设置上传文件数据编码
		upload.setHeaderEncoding("UTF-8");

		//判断当前表单是否为文件上传表单
		if (upload.isMultipartContent(request)) {
			try {
				// 把上传数据利用工厂类转换为List<FileItem>
				List<FileItem> list = upload.parseRequest(request);
				// 遍历所有的文件项
				for (FileItem item : list) {
					// 判断是否为普通文本项
					if (item.isFormField()) {
						// 获取文本框名称
						String filedName = item.getFieldName();
						// 获取文本框名称对应的值
						String value = item.getString("UTF-8");
						/*
						value = item.getString();
						value = new String(value.getBytes("iso8859-1"),"utf-8");
						*/
					}
					else {
						// 文件项

						// 获取文件名
						String fileName = item.getName();//a.txt
						// 兼容IE浏览器
						fileName = fileName.substring(fileName.lastIndexOf("\\") + 1);

						// 文件域名称
						String filedName = item.getFieldName();

						// 获取上传目录路径
						String basePath = getServletContext().getRealPath("/upload");

						// 四、解决文件重名的问题
						// 获取当前时间
						long time = System.currentTimeMillis();
						fileName = time + "__" + fileName;
						// 上传
						item.write(new File(basePath,fileName));
						// 二、删除临时目录
						item.delete();
					}
				}

			} catch (Exception e) {
				e.printStackTrace();
			}

		} else {
			// 不是文件上传表单,..........
		}


	}


3. DowloadServlet.java   文件列表查询显示

4. list.jsp    显示文件列表

<body>
	<table>
		<tr>
			<td>序号</td>
			<td>文件名</td>
			<td>操作</td>
		</tr>
		<c:if test="${not empty requestScope.map }">
		<c:forEach var="en" items="${requestScope.map}" varStatus="vs">
		<tr>
			<td>${vs.count }</td>
			<td>${en.value }</td>
			<td><a href="${pageContext.request.contextPath }/down?method=down&fullName=${en.key}">操作</a></td>
		</tr>
		</c:forEach>
		</c:if>
	</table>   	
  </body>

5. DowloadServlet.java   文件下载


/**
 * 文件下载
 * 
 * @author Administrator
 * 
 */
public class DownLoadServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		// 获取操作类型
		String method = request.getParameter("method");
		if (method == null || method == "") {
			method = "list";
		}
		// 2.下载操作
		if ("list".equals(method)) {
			list(request,response);
		}
		// 1. 列表展示
		else if ("down".equals(method)) {
			down(request,response);
		}

	}
	public void list(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// 获取upload的目录下所有已上传的文件，保存到Map集合，跳转到页面显示

		// 获取目录路径
		String basePath = getServletContext().getRealPath("/upload");
		// 目录对象
		File file = new File(basePath);
		// 获取目录下所有的文件名
		String fileNames[] = file.list();
		// 创建集合对象
		Map<String, String> map = new HashMap<String, String>();
		// 遍历文件 : fileName= 1401609473796__a.txt
		for (String fileName : fileNames) {
			// 获取显示的文件名
			String realName = fileName
					.substring(fileName.lastIndexOf("__") + 2);
			// 保存
			map.put(fileName, realName);
		}
		// 保存到域中
		request.setAttribute("map", map);
		// 转发
		request.getRequestDispatcher("/list.jsp").forward(request, response);

	}


	// 下载
	public void down(HttpServletRequest request, HttpServletResponse response) throws IOException {


		// 获取页面提交的文件全名
		String fileName = request.getParameter("fullName");
		// 编码
		try {
			fileName = new String(fileName.getBytes("iso8859-1"),"utf-8");
		} catch (Exception e) {
			e.printStackTrace();
		}

		// 设置下载头
		response.setHeader("content-disposition", "attachment;fileName=" + URLEncoder.encode(fileName, "UTF-8"));


		// 获取下载文件目录， upload
		String basePath = getServletContext().getRealPath("/upload");

		// 获取文件流
		InputStream in = new FileInputStream(new File(basePath,fileName));
		// 输出流
		OutputStream out = response.getOutputStream();

		byte[] b = new byte[1024];
		int len = -1;
		while ((len=in.read(b)) != -1) {
			out.write(b,0,len);
		}
		in.close();
		out.close();





	}