web项目上传图片到服务器保存到数据库，并在页面显示的实例分享

今天主要跟大家分享web项目上传图片到服务器保存到数据库，并在页面显示的一个项目实例。我们以在页面添加书籍信息上传书籍图片，后台进行图片上传以及将书籍信息（包括图片）保存到数据库的操作，最后在页面展示书籍信息和图片为例。
（该分享仅适用于正在学习阶段的弟弟妹妹，大佬请移步以免耽误您时间，如有不到之处还望大佬们不吝指正。）

这里实际放在数据库里的并不是图片文件，只是以字符数据类型存入图片的相对路径，原因可想而知，因为图片占用空间相比字符不可同日而语，图片数量多了数据库将不堪重负。这时候就有一个问题，既然我们存入数据库的只是图片路径，最终我们怎么在页面显示图片呢？接下来我将以叙述和代码结合的方式，以项目编写步骤为顺序逐步向大家展示本次实例。

1.首先是书籍添加页面
注意：form标签的enctype属性的值必须为"multipart/form-data"，在使用包含文件上传控件的表单时，必须使用该值。

	

		

			
添加图书信息
		
		

			

				
图书名称
				

			
			

				
作者
				

			
			

				
内容摘要
			

			
			

				
数量
				

			
			

				
图书照片 
				

			
			
			

				

					
				
			
		
	

2.实现图片上传及数据库更新的servlet
注意：这里DiskFileItemFactory等类导包时导入org.apache.commons下的这个包
uploadFilePath这个路径就是我们图片上传到本地服务器后相对当前项目所在路径的一个磁盘路径，后面我们需要这个路径。

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		Dao dao = new Dao();
		Book book = new Book();
		request.setCharacterEncoding("utf-8");
		boolean isAdd = false;
		boolean bUpload = false;
		String uploadFileName = "";
		String fieldName = "";
		//判断是否多部分提交
		boolean isMultipart = ServletFileUpload.isMultipartContent(request);
		//设置图片保存路径  这个路径相对当前应用的目录
		String uploadFilePath = request.getSession()
						.getServletContext().getRealPath("/image/");
		System.out.println(uploadFilePath);
		if(isMultipart){
			FileItemFactory factory = new DiskFileItemFactory();
			ServletFileUpload sUpload = new ServletFileUpload(factory);
			//request中的数据要封装成FileItem类型。
			//解析Request请求中的数据
			List items = null;
			try {
				items = sUpload.parseRequest(request);
			} catch (FileUploadException e1) {
				// TODO Auto-generated catch block
				e1.printStackTrace();
			}
			//数据放入迭代器中
			Iterator iterator = items.iterator();
			while(iterator.hasNext()){
				FileItem item =  (FileItem)iterator.next();//取出一个对象
				//对提交的表单元素类型进行判断
				if(item.isFormField()){//true  普通文本（一段话，一个数字）  文件（图片  mp3  碟中谍5.avi）
					fieldName = item.getFieldName();
					if("name".equals(fieldName)){
						book.setName(item.getString("utf-8"));
					}else if (fieldName.equals("author")) {
						book.setAuthor(item.getString("UTF-8"));
					} else if (fieldName.equals("store")) {
						book.setStore(Integer.parseInt(item
								.getString("UTF-8")));
					} else if (fieldName.equals("summary")) {
						book.setSummary(item.getString("UTF-8"));
					}
				}else{ //是文件
					//获取文件名
					String fileName = item.getName();
					if(fieldName != null && fieldName != ""){
						File fullFile = new File(item.getName());
						File saveFile = new File(uploadFilePath,fullFile.getName());
						try {
							item.write(saveFile);
						} catch (Exception e) {
							// TODO Auto-generated catch block
							e.printStackTrace();
						}
						uploadFileName = fullFile.getName();
						book.setImage(uploadFileName);
						//out.print("文件名字：" + uploadFileName);
						bUpload = true;
					}
				}
			}	
		}
		
		isAdd = dao.addBook(book);
		List list = dao.getBooks();

		if (bUpload) {
			request.setAttribute("list", list);
			response.getWriter().print("");
			request.getRequestDispatcher("show2.jsp").forward(request, response);
		} else {
			response.getWriter().print("");
		}
	}

3.信息展示页面

 
	

	
编号
名称
作者
		
图片
数量
概要
	
	

		
${book.id}
${book.name}
${book.author}
		

		
${book.store}
${book.summary}
	
	
	

4.其中需要编写book类，数据库建表，编写dao方法，这里只跟大家简单做简单展示

public class Book {
		private int id;
		private String name;
		private String author;
		private String image;
		private int store;
		private String summary;

public class Dao {
	DBUtils dbUtils = new DBUtils();
	
	public boolean addBook(Book book) {
		boolean flag=false;
		try {
			String sql="insert into books values(bookManage.nextval,?,?,?,?,?)";
			Object[] params={book.getName(),book.getAuthor(),book.getImage(),book.getStore(),book.getSummary()};
			System.out.println(sql);
			int i=dbUtils.executeUpdate(sql, params);
			if(i>0){
				System.out.println("添加成功");
			}
			flag=true;
		}finally{
			dbUtils.closeResource();
		}
		return flag;
	}
	
	public List getBooks() {
		List list = new ArrayList();
		String sql = "select * from books";
		Object[] objects = {};
		ResultSet rSet = dbUtils.executeSQL(sql, objects);
		try {
			while (rSet.next()) {
				Book book = new Book();
				book.setId(rSet.getInt(1));
				book.setName(rSet.getString(2));
				book.setAuthor(rSet.getString(3));
				book.setImage(rSet.getString(4));
				book.setStore(rSet.getInt(5));
				book.setSummary(rSet.getString(6));
				list.add(book);
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return list;
	}
}

5.接下来就是图片显示的问题，有web基础的同学应该知道我们在web项目中访问存储在项目中的资源是简单的，访问本地文件就没那么随心所愿了。在页面显示本地图片的方法很多，今天跟大家分享个人认为简单又好用的一种方式：配置虚拟路径。
（1）我们在Eclipse中找到服务器，下面有个server.xml文件，点击打开

（2）在标签内加入如下代码：

其中docBase就是第3点钟提到的uploadFilePath路径，可以在servlert中输出以获取该路径，其实这个路径就相对我们项目发布在tomcat的路径下的路径； path就是我们设置的虚拟路径，我这里设的是/imgUrl/。

这个配置的目的是把硬盘上一个目录映射到tomcat的工作目录下，然后tomcat就可以在映射关系下根据虚拟路径找到硬盘中的文件了。

（3）怎么使用虚拟路径的问题
这点可以参照第3点信息展示页面中的代码

${book.image}是用EL表达式从数据库中获取的图片名，/imgUrl/是我们配置的虚拟路径，这个拼接的路径其实就是uploadFilePath的值+$book.image的值，假设uploadFilePath路径是“D:/image”,‘${book.image}`获取的值是03.jpg,那么

的路径就是D：/image/03.jsp