commons-fileupload实现文件上传功能实例

作者:无名 - java -

Apache提供的commons-fileupload jar包实现文件上传确实很简单,最近要用Servlet/JSP做一个图片上传功能,在网上找了很多资料,大多是基于struts框架介绍的,还有些虽然也介绍common-fileupload的上传,但是那些例子比较老,有些类现在都废弃了。通过研究学习总结,终于完成了这个上传功能,下面与大家分享一下。

 

 

  • 案例场景

一个图书馆后台管理界面,需要提供上传图书图片的功能并且最终显示在页面中。

  • 实现效果

进入添加书籍页面,默认显示一个图片“暂无突破”(长宽均为200px),提供一个按钮“上传图片”,如下图效果。


commons-fileupload实现文件上传功能实例
  点击“上传图片”按钮,通过模式窗口弹出上传界面,如下图所示。

commons-fileupload实现文件上传功能实例
  通过“浏览”按钮选择指定图片,点击“上传”按钮进行上传,如果上传成功则弹出成功提示,用户点击“确定”后关闭弹出窗并自动将新图片显示在页面上,如下图所示。


commons-fileupload实现文件上传功能实例


commons-fileupload实现文件上传功能实例

 

 

  • 代码实现

①首先创建一个添加书籍页面:bookAdd.jsp

页面id为photo_id的hidden标签用于存储图片路径,方便提交到后台存放到数据库,id为img_id的<img>标签用于显示图片,所有图片都存放在服务器下,方便读取。然后一个关键js,点击button通过模式窗口弹出上传页面,在弹出模式窗口时定义了一个变量win,该变量用于获取模式窗口传回的图片路径值。

(注意:因为安全性问题图片不能图片不能随意存放,项目部署在服务器中,图片就只能放在该服务器下才能查看得到,如果一定要读取非当前服务器下的图片需要配置服务器的虚拟目录)

<html>
	<head>
		<title>添加书籍</title>
		<script type="text/javascript">
			//打开上传页面
			function openUpload(){
				var win = window.showModalDialog("<%=root%>/Admin/bookUpload.jsp","","dialogWidth:300px;dialogHeight:300px;scroll:no;status:no");
				if(win != null){
					document.getElementById("photo_id").value = win;
					document.getElementById("img_id").src = "<%=root%>/"+win;
				}
			}
		</script>
	</head>
	<body>
		<h5>添加书籍</h5><hr/>
			<p>
				书的封面:
				<label>
					<input type="hidden" id="photo_id" name="photo" value="images/noimg.png"><input type="button" onclick="openUpload()" value="上传图片"/><br/>
					<img id="img_id" alt="" src="<%=root%>/images/noimg.png" width="200px" height="200px">
				</label>
			</p>
      </body>
</html>

  ②创建上传图片页面,bookUpload.jsp

注意一定要定义<base>标签,当前模式窗口关闭时才能将数据返回到父窗体,<form>标签还要设置一个属性enctype="multipart/form-data"这样提交的文件才能被后台获取,点击“上传”button即可将文件向后台传送,剩下的重头戏就是后台上传处理了。

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<meta http-equiv="pragma" content="no-cache" />
		<base target="_self">
		<title>书籍图片上传</title>
	</head>
	<body>
		<h5>图片上传</h5><hr/>
		<p style="color: red">${requestScope.errorMsg}</p>
		<form id="form1" name="form1" action="<%=root%>/BookServlettype=bookUpload" method="post" enctype="multipart/form-data">
			<p>注:图片大小最大不能超过3M!</p>
			<p><input type="file" name="file_upload"/></p>
			<p><input type="submit" value="上传"/></p>
		</form>
	</body>
</html>

  ③创建一个普通的Servlet,下面只提供部分关键代码

红色代码部分是上传的关键代码,其它就是作为点缀了。完成这三步,一个简单的上传即实现了。

public class BookServlet extends HttpServlet {

	private String uploadPath = "eShop/upload/"; // 上传文件的目录
	private String tempPath = "eShop/uploadtmp/"; // 临时文件目录
	private String serverPath = null;
	
	private int sizeMax = 3;//图片最大上限
	private String[] fileType = new String[]{".jpg",".gif",".bmp",".png",".jpeg",".ico"};

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		serverPath = getServletContext().getRealPath("/").replace("\\", "/");
		//Servlet初始化时执行,如果上传文件目录不存在则自动创建
		if(!new File(serverPath+uploadPath).isDirectory()){
			new File(serverPath+uploadPath).mkdirs();
		}
		if(!new File(serverPath+tempPath).isDirectory()){
			new File(serverPath+tempPath).mkdirs();
		}

		DiskFileItemFactory factory = new DiskFileItemFactory();
		factory.setSizeThreshold(5*1024); //最大缓存
		factory.setRepository(new File(serverPath+tempPath));//临时文件目录
		
		ServletFileUpload upload = new ServletFileUpload(factory);
		upload.setSizeMax(sizeMax*1024*1024);//文件最大上限
		
		String filePath = null;
		try {
			List<FileItem> items = upload.parseRequest(request);//获取所有文件列表
			for (FileItem item : items) {
				//获得文件名,这个文件名包括路径
				if(!item.isFormField()){
					//文件名
					String fileName = item.getName().toLowerCase();
					
					if(fileName.endsWith(fileType[0])||fileName.endsWith(fileType[1])||fileName.endsWith(fileType[2])||fileName.endsWith(fileType[3])||fileName.endsWith(fileType[4])||fileName.endsWith(fileType[5])){
						String uuid = UUID.randomUUID().toString();
						filePath = serverPath+uploadPath+uuid+fileName.substring(fileName.lastIndexOf("."));
						item.write(new File(filePath));
						PrintWriter pw = response.getWriter();
						pw.write("<script>alert('上传成功');window.returnValue='"+uploadPath+uuid+fileName.substring(fileName.lastIndexOf("."))+"';window.close();</script>");
						pw.flush();
						pw.close();
					}else{
						request.setAttribute("errorMsg", "上传失败,请确认上传的文件存在并且类型是图片!");
						request.getRequestDispatcher("/Admin/bookUpload.jsp").forward(request,
								response);
					}
				}
			}
		} catch (Exception e) {
			e.printStackTrace();
			request.setAttribute("errorMsg", "上传失败,请确认上传的文件大小不能超过"+sizeMax+"M");
			request.getRequestDispatcher("/Admin/bookUpload.jsp").forward(request,
					response);
		}
		
	}


IT人知识库 该篇知识地址:http://www.itpeo.net/12806/3488737.html





rfedfre

struts2常用标签详解

struts2框架是一个非常优秀的mvc框架,时至今日已有很多公司采用其作为表示层的控制转发工具,我非常喜欢strut... ...

rfedfre

方法对象Spring MVC SimpleFormController

本文纯属个人见解,是对前面学习的总结,如有描述不正确的地方还请高手指正~    &nbs... ...

rfedfre

测试类图Head First 设计模式 (九) 迭代器与组合模式(Iterator & Composite pattern) C++实现

在改章节中,我们主要介绍测试类图的内容,自我感觉有个不错的建议和大家分享下    &nb... ...

rfedfre

maven_安装

  maven下载 http://maven.apache.org/dowload.html... ...

rfedfre

要创业,先退学【摘】

Etsy.com 的董事会结束以后,我和Fred一起开车回家。 聊天中,我们发现很多企业家都是退学生。比如,Est... ...

DB_ID_UUID一个实现

ID Generator A lot of us (until recently myself included... ...

Socket:流,TCP连接,TCP可靠性概述

如前文所说,不同类型的Socket与不同类型的底层协议族以及同一协议族中的不同协议相关联。而我想说的主要就是TCP/IP... ...

分组报文,协议和Socket的概念

这篇随笔是我接着上篇《字节和字符,对信息进行编码》继续写的内容,看过上篇随笔能更好的理解这篇内容。我想从基础的开始说起,... ...

fckeditor-修改上传路径等问题

fckeditor php使用配置 下载地址: http://www.fckeditor.net/download 效... ...

获取服务器传来的数据-必须用JS去空格

今天早上到现在,一直在搞一个很愚蠢的问题,竟然一直没发现 如果$str=""; $str = "$str-$sno"; ... ...

rfedfre

hibernate常用API详解

  根据个人使用Hibernate的经验,介绍一下Hibernate的多种不同的查询和CUD操作,这些东西在... ...

rfedfre

Java的那些故事

一、 Java的故事 1、Java的诞生 让我们把时空切换到1982年,那一年一个伟大的公司诞生于美国斯坦福大学校园... ...

rfedfre

Java IDE编辑器 ------IntelliJ IDEA 使用基础篇

  IntelliJ IDEA  使用基础篇   Java ... ...

rfedfre

基于模型驱动的业务开发

不多说了,看图,有点粗糙,基本实现模型的编辑和数据编辑,下一步处理权限与工作流集成,不定时公布最新快照。 1 、模型定... ...

rfedfre

inner join ,left join ,right join 的区别

 注意下图当:left join tbl_EmployeeLD c on a.EmpNum = c... ...

rfedfre

信号处理电路1:差动转单端输出电路计算于分析

先来看一幅电路:       V1,V2是输入端电压,V+,V-是运放端电压,... ...

rfedfre

Block编程

Block编程值得注意的那些事儿 [深入浅出Cocoa]Block编程值得注意的那些事儿 罗朝辉 (http... ...

缓存的简单实现

CacheMgr.javaimport java.util.*;import cn.javass.framework.c... ...

rfedfre

跟叶子学把妹——教程序猿把妹第八集

自《天方叶谈》创刊以来,叶子一直在努力将自己的所见、所思、所感一点一点终结成泡妞经验,目的只有一个,就是让更... ...

rfedfre

关于“异步”,从Amazon的工作流框架中获得的思考

紧接着上篇文章 ,云平台的工作流框架AWS Flow Framework给我带来的另一个有所感触的话题是“异步”: ... ...