小白浅谈jsp实现表单上传文件时取值

jar包下载

文件上传需要引入两个commons的jar包，建议在官网下载，下载完粘贴到javaEE项目目录文件下的lib目录下，快速下载地址。下载流程图：




粘贴完项目lib目录如下：

表单index.jsp

首先写上传文件，在javaEE项目下的WebContent下创建index.jsp，代码如下：

<form action="ass" method="post" enctype="multipart/form-data" class="STYLE-NAME">
  <h1>
   <span>新闻发布</span>
  </h1>
  <label>
   <span>标题 :</span>
   <input id="name" type="text" name="title" value="" />
  </label>
  <label>
   <span>作者 :</span>
   <input id="email" type="text" name="master" value="" />
  </label>
  <label>
   <span>内容 :</span>
   <textarea id="message" name="subject"></textarea>
  </label>
  <label>
   <span class="spanstyle">图片 :</span>
   <input type="file" name="picture" />
  </label>
  <div class="last">
   <input type="submit" class="button" value="提交" />
   <input type="reset" class="button" value="取消">
  </div>
 </form>

项目index.jsp的css样式代码如下：

body{
 background-color: #9BB8D5;
 margin-left: auto;
 margin-right: auto;
 max-width: 500px;
 padding: 25px 15px 25px 10px;
 font: 12px Georgia, "Times New Roman", Times, serif;
 border: 1px solid #E4E4E4;
}
h1{
 font-size: 25px;
 padding: 0px 0px 10px 40px;
 display: block;
 border-bottom: 1px solid #E4E4E4;
 margin: -10px -15px 30px -10px;
}
h1>span {
 display: block;
 font-size: 11px;
}
.basic-grey label {
 display: block;
 margin: 0px;
}
label>span {
 float: left;
 width: 20%;
 text-align: right;
 padding-right: 10px;
 margin-top: 10px;
}
input[type="text"], input[type="email"], textarea, select {
 border: 1px solid #DADADA;
 height: 30px;
 margin-bottom: 16px;
 margin-right: 6px;
 margin-top: 2px;
 outline: 0 none;
 padding: 3px 3px 3px 5px;
 width: 70%;
 font-size: 12px;
 line-height: 15px;
 box-shadow: inset 0px 1px 4px #ECECEC;
 -moz-box-shadow: inset 0px 1px 4px #ECECEC;
 -webkit-box-shadow: inset 0px 1px 4px #ECECEC;
}
textarea {
 padding: 5px 3px 3px 5px;
 height: 100px;
}
select {
 background: #FFF url('down-arrow.png') no-repeat right;
 background: #FFF url('down-arrow.png') no-repeat right);
 appearance: none;
 -webkit-appearance: none;
 -moz-appearance: none;
 text-indent: 0.01px;
 text-overflow: '';
 width: 72%;
 height: 35px;
 line-height: 25px;
}
.button {
 margin: auto;
 background: #E27575;
 border: none;
 padding: 10px 25px 10px 25px;
 color: #FFF;
 box-shadow: 1px 1px 5px #B6B6B6;
 border-radius: 3px;
 text-shadow: 1px 1px 1px #9E3F3F;
 cursor: pointer;
}
.button:hover {
 background: #CF7A7A
}
.spanstyle {
 margin-top: 5px;
}
.last{
 text-align: center;
 margin-top: 10px;
}

写完大概index.jsp运行是如下图所示：

接下来写接受值得jsp，继续在javaEE项目下的WebContent下创建Receive.jsp，代码如下：

 <%
  request.setCharacterEncoding("utf-8"); //防止中文乱码
 String title = (String) request.getAttribute("Rtitle");
 String master = (String) request.getAttribute("Rmaster");
 String subject = (String) request.getAttribute("Rsubject");
 String picture = (String) request.getAttribute("Rpicture");
 out.println(title);
 out.print(master);
 out.print(subject);
 out.print(picture);
 %>

上传功能的Servlet

在里主要是重写他的方法，代码如下：

package Servlet;

import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/ass")
public class UpServlet extends HttpServlet {

 /**
  * 
  */
 private static final long serialVersionUID = 1L;
 @Override
 public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
   doPost(request, response);
 }
 
 private String Rpicture;// 图片
 @Override
 public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
   response.setContentType("text/html;charset=UTF-8");// 设置格式编码
   request.setCharacterEncoding("UTF-8");// 设置格式编码
   response.setContentType("text/html; charset=UTF-8");
   Map<String, String> info = new HashMap<String, String>();// 创建一个map存储属性名和属性值
   String tempDirectory = "D:\\cache/"; // 要在最后加上斜杠:temp/，缓存文件目录
   boolean isMultipart = ServletFileUpload.isMultipartContent(request);// 判断enctype属性是否为multipart/form-data
   if (isMultipart) {
     try {
       int sizeThreshold = 1024 * 64; // 写满该大小的缓存后，存入硬盘中。
       File repositoryFile = new File(tempDirectory);
       FileItemFactory factory = new DiskFileItemFactory(sizeThreshold, repositoryFile);
       ServletFileUpload upload = new ServletFileUpload(factory);
       upload.setHeaderEncoding("utf-8"); // 设置字符编码
       upload.setSizeMax(20 * 1024 * 1024); // 设置最大20M
       List<FileItem> items = upload.parseRequest(request); // 这里开始执行上传
       for (FileItem fileItem : items) {
       // 判断每一个表单元素是否是普通表单
         if (fileItem.isFormField()) { // isFormField方法用于判断FileItem是否代表一个普通表单域(即非file表单域)
           String name = fileItem.getFieldName();
           String value = new String(fileItem.getString().getBytes("ISO-8859-1"), "utf-8");
           info.put(name, value);
         } else {
           String path = fileItem.getName();
           Rpicture = path.substring(path.lastIndexOf("\\"));//取目标文件的最后一个斜杠后的字符包括最后一个\
           File uploadedFile = new File("D:\\Receive/" + Rpicture);
           fileItem.write(uploadedFile);
         }
      }
    } catch (Exception e) {
      e.printStackTrace();
    }
  }
  Rpicture = Rpicture.substring(Rpicture.lastIndexOf("\\") + 1);//处理图片文件名，只获取文件名，不包括最后一个\
  request.setAttribute( "Rtitle",info.get("title"));
  request.setAttribute( "Rmaster",info.get("master"));
  request.setAttribute( "Rsubject",info.get("subject"));
  request.setAttribute( "Rpicture",Rpicture);
  request.getRequestDispatcher("Receive.jsp").forward(request, response);//转发到接收页面
  }      
}

效果

直接上图：

点击提交后，接收页面会显示

打开文件夹我们会看到刚才上传得图片已经存储到D:\Receive文件夹下了

还有不足，如有更好的方法请各位“老猿人”留下评论，谢谢！