任务五 实现新闻的图片上传
学习目标
了解图片上传的基本过程。
了解使用第三方组件的基本步骤。
知道Apache的common-fileupload的常用对象及方法的作用。
会使用文件上传组件完成图片的上传。
任务描述
任务四完成了新闻文本信息的发布功能，但是没有实现图片的上传。本次任务要求在任务四的基础上完成图片的上传功能。当用户在图1-5-1中单击“新闻提交”按钮之后，用户在文件域中选择的图片将被上传到网站根目录下的images/news文件夹下。
图1-5-1 任务五效果图
任务分析与相关知识
1.图片上传原理
图片上传是指客户端通过Web应用程序将本地图片资源传输到服务器上。在客户端需要显示图片时，服务器端将图片通过网络以流的形式发送给客户端，然后利用不同的形式显示图片。目前很多Web网站都提供了文件上传和下载功能。图片上传和读取显示是文件上传技术中的一种，两者的原理一致，都是将文件以二进制流的形式通过网络传输给服务器并存储在服务器上。
图片的上传一般有两种存储形式：
1）磁盘存储。将上传的图片以文件形式存储在服务器指定的磁盘上。
2）数据库存储。将上传的图片存储在数据库服务器中（数据库一般提供存储图片的数据类型）。
这两种存储方式各有利弊。利用数据库来存储这些资源会导致数据库的处理效率降低，但相对安全。利用磁盘来存储图片资源安全性相对来说比较低，但不会影响到处理的效率。
本书采用第一种磁盘存储的方式来处理图片的上传，其基本原理如图1-5-2所示。
图1-5-2 图片上传原理
2.文件上传组件介绍
文件上传组件是一些开源组织发布的针对实现文件上传功能的一组class文件。目前比较流行的组件是jspSmartUpload和Apache的common-fileupload。这两个组件都可以在JSP中实现文件上传。图片也是一种文件，所以本书将使用Apache的common-fileupload组件实现图片上传。
common-fileupload组件是Apache的开源项目之一。用该组件可实现一次上传一个或多个文件，并可限制文件大小。读者可以从http：//jakarta.apache.org/commons/fileupload/下载到该组件。该组件的核心类见表1-5-1。
表1-5-1 common-fileupload的核心类列表
演示 使用common-fileupload组件实现图片的上传。
1）将从网上下载的common-fileupload组件中的类包，复制到Hello网站根目录下的WEB-INF\lib下，如图1-5-3所示。
图1-5-3 上传组件的位置截图
2）在Hello网站根目录下添加一个HTML文件testSelectPhoto.html。
代码1-5-1 testSelectPhoto.html
测试testSelectPhoto.html的效果，如图1-5-4所示。
图1-5-4 testSelectPhoto.html页面效果图
3）在Hello网站下添加一个Servlet文件UploadPhoto，该Servlet的别名是uploadphoto，路经映射是/uploadphoto，该类被放置在servlets包中，代码如下所示。
代码1-5-2 UploadPhoto.java
运行Hello网站项目，在testSelectPhoto.html的表单中输入如图1-5-5所示的内容，单击“上传”按钮之后，网页会显示上传成功的图片，并在网站运行的根目录下出现刚刚上传的图片文件，如图1-5-6所示。
图1-5-5 testSelectPhoto.html页面效果图
图1-5-6 上传成功之后图片路径
任务实施
1.任务单
本次任务的任务清单见表1-5-2。
表1-5-2 任务五的任务清单
2.实施步骤
步骤一 打开GreenBar下的bk_news_upload.html，搜索代码到form表单定义的地方，将原有的form表单的定义修改为如下所示的代码。
步骤二 在项目GreenBar下添加一个Servlet文件NewsUploadServlet2，该Servlet的别名是newsupload2，路经映射是/newsupload2，该类被放置在servlets包中，代码如下所示。
代码1-5-3 NewsUploadServlet2.java
【操作提示】
请模仿代码1-5-2，完成本次任务实施的编码任务。
运行GreenBar网站项目，测试图片是否上传成功。需要注意的一点是，如果选择的是MyEclipse自带的tomcat服务，而不是外挂的第三方服务器，那么运行中的网站是部署在MyEclipse自带的tomcat软件环境中的。
自我评价
思考与练习
一、选择题
1.用于文件传送的form表单中的enctype属性应该等于（ ）。
A.application/x-www-form-urlencoded
B.multipart/form-data
C.text/plain
D.不需要设置，采用默认值
2.用于文件上传的组件在Web项目中的物理位置在（ ）。
A.Web项目的webRoot下
B.Web项目的src下
C.Web项目的WEB-INF下的lib下
D.Web项目的WEB-INF下的classes下
3.common-fileupload组件中的ServletFileUpload是用来实现文件上传的核心类，该类的parseRequest方法用来对请求对象中的参数进行解析，解析的结果的返回类型是（ ）。
A.返回FileItem类型的数据项
B.返回一个集合
C.返回一个字符串
D.返回一个数组
4.File类用于创建文件夹的方法是（ ）。
A.makePath B.mackdirs
C.mkdirs D.mkpath
二、简答题
1.简单表述文件上传的过程。
2.简单罗列FileItem的常用方法及其作用。
三、操作题
模仿本次任务，为绿吧门户网站后台实现产品发布功能（要求实现多张产品图片上传），效果如图1-5-7、图1-5-8所示。
图1-5-7 产品发布页面效果截图
图1-5-8 产品发布成功之后效果截图