1.6 文件域
文件域是form表单中一个非常重要的元素，它肩负着文件和图片上传的功能。在应用这个元素时必须在form标签中指定enctype="multipart/form-data"属性，否则不能实现上传的操作。下面通过几个具体的实例介绍在JSP中应用文件域的技巧。
实例023 通过文件域同时上传多个图片
本实例是一个提高效率、人性化的程序
实例位置：光盘\mingrisoft\01\023
实例说明
在编写程序时，经常会应用到上传文件或者上传图片的功能。而无论文件还是图片的上传都要应用到form表单中的文件域，都需要通过文件域来进行提交。在本实例中介绍一种可以同时上传多个图片的方法，当然也可以每次上传一个图片，只要不超过其最大值就没有问题。运行结果如图1.32所示。
图1.32 通过文件域同时上传多个图片
技术要点
本实例主要应用form表单中的文件域提交图片，然后应用jspSmartUpload组件实现将提交的图片存储到服务器指定的文件夹下。
（1）应用jspSmartUpload组件中File类的isMissing()和getFileName()方法，判断用户是否选择了文件和获取文件的文件名。
（2）应用jspSmartUpload组件中Files类的getCount()和getFile()方法，获取上传文件的数目和获取指定的File对象。
（3）应用jspSmartUpload组件中Request类的getParameter()方法获取指定表单元素的值。（4）通过jspSmartUpload组件中SmartUpload类提供的方法实现图片的上传以及对上传图片大小和格式的判断。
技巧：在创建上传图片的form表单时，必须添加“enctype="multipart/form-data"”属性，否则将不能进行上传的操作。
实现过程
（1）创建上传图片的form表单，添加文件域元素，设置enctype="multipart/form-data"属性，关键代码如下：
<form name="form1" method="post" action="Upfile_Picture" enctype="multipart/form-data">
<tr>
<td width="314" align="center">图片（1）
<input name="picture1" type="text" id="picture1" size="18"></td>
<td width="332">选择图片：
<input name="files1" type="file" id="files1"></td>
</tr>
<tr>
<td align="center">图片（2）
<input name="picture2" type="text" id="picture2" size="18"></td>
<td>选择图片：
<input name="files2" type="file" id="files2"></td>
</tr>
<tr>
<td align="center">图片（3）
<input name="picture3" type="text" id="picture3" size="18"></td>
<td>选择图片：
<input name="files3" type="file" id="files3"></td>
</tr>
<tr>
<td align="right"><a href="index_ok.jsp" target="_blank">浏览图片</a> </td>
<td align="left"> <input type="submit" name="Submit" value="提交"></td>
</tr>
</form>
（3）创建Upfile_Picture类，实现将上传的图片存储到服务器指定的文件夹下，并且将上传图片在服务器指定文件夹下的路径添加到数据库中，用于实现对上传图片的浏览。关键代码如下：
public class Upfile_Picture extends HttpServlet {
private String filedir = null;
private long maxsize;
private String types = null;
public void init() throws ServletException {
filedir=getInitParameter("filedir"); //初始化上传文件的路径
maxsize=Long.valueOf(getInitParameter("maxsize")); //初始化上传文件的大小
types=getInitParameter("type"); //初始化上传文件的类型
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
UserDao conn=new UserDao(); //实例化操作数据库类
SmartUpload su=new SmartUpload(); //实例化上传文件类
try {
su.initialize(this.getServletConfig(),request,response); //应用initialize
su.setMaxFileSize(maxsize); //限制上传文件大小
su.setAllowedFilesList(types); //设置上传文件的类型
su.upload(); //实现上传功能
Files files=su.getFiles(); //实例化Files类
//通过Files类中的getCount方法获取上传图片的数目，并通过for语句循环输出
for (int i = 0; i < files.getCount(); i++) {
File singlefile=files.getFile(i); //实例化File类
if(!singlefile.isMissing()){ //通过File类中的isMissing()方法判断用户是否选择了文件
String file_picture=su.getRequest().getParameter("picture"+(i+1)); //获取指定元素的名称
//定义上传文件在服务器中的存储路径，通过File类中的getFileName方法获取上传文件的文件名
String file_path = filedir + singlefile.getFileName();
//将上传图片在服务器中存储的路径添加到数据库中
String sqls = "insert into tb_picture (picture_name,file_path)values('" + file_picture + "','" + file_path + "')";
conn.executeUpdate(sqls);
}
}
su.save(filedir); //上传文件
out.println("<script >alert('上传图片成功!'); window.location.href='index_ok.jsp';</script>");
} catch (Exception e) {
if (e.getMessage().indexOf("extension") != -1) {
out.println("<script >alert('上传文件的格式不正确!'); window.location.href='index.jsp';</script>");
}
if (e.getMessage().indexOf("Size exceeded for this file") != -1) {
out.println("<script >alert('文件大小超出范围!'); window.location.href='index.jsp';</script>");
}
e.printStackTrace();
}
}
}
（4）创建index_ok.jsp页面，应用javaBean标签，调用数据库操作类，循环输出上传图片。关键代码如下：
<%@page contentType="text/html" pageEncoding="GBK" import="java.sql.ResultSet" %>
<jsp:useBean id="mysql" class="com.pkh.dao.UserDao"/>
<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"></td>
<%
String sql = "select * from tb_picture";
ResultSet rs = mysql.selectStatic(sql);
if (rs.next()) {
int i = 0;
rs.previous();
while (rs.next()) {
if ((i % 3) == 0) {
%>
</tr>
<tr>
<% } %>
<td>
<table width="250" border="1" cellpadding="1" cellspacing="1">
<tr>
<td align="center">图片名称:<%=rs.getString("picture_name")%></td>
</tr>
<tr>
<td><img src="<%=rs.getString("file_path")%>" width="240" height="200"></td>
</tr>
</table> </td>
<%
if ((i % 3) != 0) {
}
i++;
}
%>
</tr>
<%
} else {
%>
<tr><td align="center">没有数据！</td></tr>
<% } %>
</table>
举一反三
根据本实例，读者可以：
在商品信息添加页面中实现图片文件上传；
开发商品信息维护页面。
实例024 设置文件域的初始值
本实例是一个提高效率、人性化的程序
实例位置：光盘\mingrisoft\01\024
实例说明
上传文件或者图片是很多程序员都开发过的功能，大家应该注意到，当上传成功后，文件域中本地文件的存储路径消失了，如果想重新上传或者查看该文件在本地的存储位置，那就要重新单击“浏览”按钮在本地文件中进行查找。本实例将介绍一种获取文件域初始值的方法，即当文件上传成功后，上传文件选择的本地文件仍然出现在文件域中，这样就可以直接进行查看文件位置或者重新上传。运行结果如图1.33所示。
图1.33 设置文件域的初始值
技术要点
本实例主要应用clipboardData对象中的getData()和setData()方法，在执行上传操作的过程中通过onClick()事件调用setData()方法，将上传文件的值定义到剪贴板中，然后在上传成功返回到本页时通过onLoad()事件调用自定义方法setFileFieldValue()，将剪贴板中的值强制复制到文件域中。
clipboardData对象中支持的方法如表1.8所示。
表1.8 clipboardData对象中支持的方法
getData方法，实现从剪贴板中获取指定格式的数据。语法如下：
sRetrieveData = object.getData(sDataFormat)
参数sDataFormat指定剪贴板中数据的格式，包括text和url两种。返回值是dataTransfer或clipboardData对象。
SetData方法，实现以指定的格式给对象赋予数据。语法如下：
bSuccess = object.setData(sDataFormat, sData)
参数sDataFormat，设置赋予数据的格式，包括text和url两种，参数sData是为对象赋予的参数值。成功则返回更多数据，失败则没有返回数据。
自定义方法setFileFieldValue()的语法如下：
function setFileFieldValue(){ //为文件域设置value值
var WshShell=new ActiveXObject("WScript.Shell");
var files=window.clipboardData.getData('Text'); //获取剪贴板中存储的文件域地址
window.clipboardData.setData('text',files); //将files的值重新載入到剪贴板
document.getElementById("files").focus(); //获取files的焦点
WshShell.sendKeys("^v"); //将值赋給文件域
}
实现过程
（1）创建index.jsp页面，在body标签中通过onLoad事件调用自定义方法，添加form表单，设置上传文件使用的文件域，在按钮元素中通过onClick事件调用setData()方法获取文件域的值。关键代码如下：
<script type="text/javascript" src="js/upload.js"></script>
<body onLoad="setFileFieldValue()">
<table width="1004" height="650" border="0" background="images/bg.jpg">
<form action="Upfile_Picture" name="form1" method="post" enctype="multipart/form-data">
<tr>
<td align="center" valign="top"><p>选择文件：
<input name="files" type="file" size="30">
<input name="btn_upload" type="submit"
onClick="window.clipboardData.setData('text',form1.files.value)" value="上传"></p>
</td>
</tr>
</form>
</table>
</body>
（3）创建Upfile_Picture类，实现将上传的图片存储到服务器指定的文件夹下，并对上传文件的格式和大小进行限制，最后上传成功返回index.jsp页面。关键代码如下：
public class Upfile_Picture extends HttpServlet {
private String filedir = null;
private long maxsize;
private String types = null;
public void init() throws ServletException {
filedir=getInitParameter("filedir"); //初始化上传文件的路径
maxsize=Long.valueOf(getInitParameter("maxsize")); //初始化上传文件的大小
types=getInitParameter("type"); //初始化上传文件的类型
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
SmartUpload su=new SmartUpload(); //实例化上传文件类
try {
su.initialize(this.getServletConfig(),request,response); //应用initialize
su.setMaxFileSize(maxsize); //限制上传文件大小
su.setAllowedFilesList(types); //设置上传文件的类型
su.upload(); //实现上传功能
su.save(filedir); //上传文件
out.println("<script >alert('上传图片成功!'); window.location.href='index.jsp';</script>");
} catch (Exception e) {
if (e.getMessage().indexOf("extension") != -1) {
out.println("<script >alert('上传文件的格式不正确!'); window.location.href='index.jsp';</script>");
}
if (e.getMessage().indexOf("Size exceeded for this file") != -1) {
out.println("<script >alert('文件大小超出范围!'); window.location.href='index.jsp';</script>");
}
e.printStackTrace();
}
}
}
（4）配置web.xml文件，通过过滤器实现字符编码格式的转换；通过Servlet实现文件上传的操作，并且设置上传文件的格式和大小的初始值，以及文件在服务器中的存储路径。关键代码如下：
<!—通过过滤器实现编码转换-->
<filter>
<filter-name>CharacterEncodingFilter</filter-name>
<filter-class>com.pkh.charset.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>gbk</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CharacterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
<dispatcher>INCLUDE</dispatcher>
</filter-mapping>
<servlet>
<servlet-name>Upfile_Picture</servlet-name>
<servlet-class>com.pkh.servlet.Upfile_Picture</servlet-class>
<!—设置上传文件的大小-->
<init-param>
<param-name>maxsize</param-name>
<param-value>2097152</param-value>
</init-param>
<!—设置上传文件的格式-->
<init-param>
<param-name>type</param-name>
<param-value>JPG,jpg,gif,bmp,BMP</param-value>
</init-param>
<!—设置上传文件的存储位置-->
<init-param>
<param-name>filedir</param-name>
<param-value>upload/</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>Upfile_Picture</servlet-name>
<url-pattern>/Upfile_Picture</url-pattern>
</servlet-mapping>
举一反三
根据本实例，读者可以：
在电子商务的商品管理中应用；
在企业的OA管理系统中实现上传员工图片中应用。