struts2实现头像上传

原创于 2017-05-03 21:31:24 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

Java基础知识专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一个使用JSP实现的表单页面，该页面包括了基本信息的填写及文件上传功能，并集成了jQuery插件进行客户端验证。此外，还展示了如何通过Servlet处理这些表单数据，包括普通文本字段和上传的文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一。jsp表单页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>录入信息</title>
<style type="text/css">
		table{
			background-color:#CCCCCC;
			border:1px;
			width:100%;
		}
		table tr{
			height:20px;
		}
		table tr div{
			text-align:right;
			
		}
		td font{
			color:red;
		}
	   .error{ color:red;}
	</style>
	<!--jQuery的在线引入地址 -->
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>

	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
	<!--提供的中文字幕在线引入地址 -->
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
	
	<script type="text/javascript"> 	
	$(function(){
		//表单验证，规则书写样式。详情见http://www.runoob.com/jquery/jquery-plugin-validate.html
			$("#client_form").validate({
				
				rules:{
				//clientname设置为必须输入的字段
					username:"required",
					password:"required",
					age:{
						required:true,
					//设置为必须输入为整数	
						digits:true,
					//范围为0-130；	
						range:[0,130]
					},
					/* email:{
						required:true,
						email:true
					} */
				},
				messages:{
				//clientname为空，则提示"用户名不能为空";
					username:"用户名不能为空!",
					password:"密码不能为空！",
					
					age:{
				//同上，不满足条件。则弹出以下提示	
						required:"年龄不能为空!",
						digits:"年龄只能是数字!"
					},
					/* email:{
						required:"邮箱地址不能为空!",
						email:"必须输入正确格式的电子邮件。"
					} */
				}
				
			});	
		
				 
			 $("#username").blur(function(){
				
				 $.ajax({
					
					 url:"${pageContext.request.contextPath}/AjaxServlet", //规定发送请求的 URL。默认是当前页面。
					 data:"username="+$(this).val(),  //规定要发送到服务器的数据。
					 dataType:"json",  //预期的服务器响应的数据类型。
					 success:function(result){  // 	当请求成功时运行的函数。
						 alert(result.msg);
						 if(result.msg == 'yes'){
							 $("#msg").empty();
							 $("#username").after("<span id='msg' style='color:red;font-size:14px'>用户名已存在!</span>");
						 }
					 },	 
					 error:function(xhr,status,error){  //如果请求失败要运行的函数。
						 alert(error+"  "+status);
					 }
				 });
			 });
			
	 
	
	});
	
	</script>
</head>
<body>
<!-- username,age,sex,department,headerUrl,password -->
 <h1>添加信息</h1>
	<form id="client_form" action="<%=request.getContextPath()%>/ServletAdd" method="post" enctype="multipart/form-data">
		<input id="id" type="hidden" name="id" value="" size="30">
		<table>
			<tr bgcolor="#f5f5f5">
				<td><div>
						<font>*</font> 用户名:
					</div></td>
				<td><input id="username" type="text" name="username" value="" size="30"></td>
				
			</tr>
			<tr bgcolor="#f0f0f0">
				<td><div><font>*</font> 年龄:</div></td>
				<td><input id="age" type="text" name="age" value="" size="30"></td>
			</tr>
			<tr bgcolor="#f5f5f5">
				<td><div>
						<font>*</font> 性别:
					</div></td>
				<td><input type="radio" name="sex" value="0" size="30" checked="checked">男
				    <input type="radio" name="sex" value="1" size="30">女
				</td>
			</tr>
			<tr bgcolor="#f0f0f0">
				<td><div><font>*</font> 部门:</div></td>
				<td><input type="text" name="department" value="" size="30"></td>
			</tr>
			<tr bgcolor="#f5f5f5">
				<td><div>
						<font>*</font> 密码:
					</div></td>
				<td><input id="psd" type="text" name="password" value="" size="30"></td>
			</tr>
           <tr bgcolor="#f0f0f0">
				<td><div><font>*</font> 头像上传:</div></td>
				<td><input type="file" name="file" value="" size="30"></td>
			</tr>

			<tr bgcolor="#f5f5f5">
				<td></td>
				<td colspan="2"><input type="submit" value="提交"> <input
					type="reset" value="重置"></td>
			</tr>
		</table>
	</form>
</body>
</html>

二。model界面，worker2继承自worker

package servlet02.Model;

public class Worker {
	private int id;
	private String username;
	private int age;
	private int sex;
	private String department;
	private String headerUrl;
	private String password;
	


	public Worker() {
	}
	public Worker(String username, int age, int sex, String department, String headerUrl, String password) {
		
		this.username = username;
		this.age = age;
		this.sex = sex;
		this.department = department;
		this.headerUrl = headerUrl;
		this.password = password;
	}
	public Worker(int id, String username, int age, int sex, String department, String headerUrl, String password) {
	
		this.id = id;
		this.username = username;
		this.age = age;
		this.sex = sex;
		this.department = department;
		this.headerUrl = headerUrl;
		this.password = password;
	}
	public Worker(String username, String password) {
	
		this.username = username;
		this.password = password;
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public int getSex() {
		return sex;
	}
	public void setSex(int sex) {
		this.sex = sex;
	}
	public String getDepartment() {
		return department;
	}
	public void setDepartment(String department) {
		this.department = department;
	}
	public String getHeaderUrl() {
		return headerUrl;
	}
	public void setHeaderUrl(String headerUrl) {
		this.headerUrl = headerUrl;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	@Override
	public String toString() {
		return "Worker [username=" + username + ", age=" + age + ", sex=" + sex + ", department=" + department
				+ ", headUrl=" + headerUrl + ", password=" + password + "]";
	}
	
	
	
	
}

worker2的model

package servlet02.Model;

import java.io.File;

public class Worker2 extends Worker{
	private File file;
	private String fileFileName;
	private String fileContenType;
	
	public File getFile() {
		return file;
	}
	public void setFile(File file) {
		this.file = file;
	}
	public String getFileFileName() {
		return fileFileName;
	}
	public void setFileFileName(String fileFileName) {
		this.fileFileName = fileFileName;
	}
	public String getFileContenType() {
		return fileContenType;
	}
	public void setFileContenType(String fileContenType) {
		this.fileContenType = fileContenType;
	}
	
	
}

三。action界面

package servlet02.controller;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.io.UnsupportedEncodingException;
import java.util.HashMap;
import java.util.List;

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

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.io.FileUtils;
import org.apache.struts2.ServletActionContext;
import org.apache.struts2.interceptor.RequestAware;

import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;
import com.sun.xml.internal.messaging.saaj.packaging.mime.Header;

import servlet02.Model.Worker;
import servlet02.Model.Worker2;
import servlet02.service.impl.WorkerServiceImpl;
import servlet02.service.intf.WorkerService;

public class ServletAdd extends ActionSupport implements ModelDriven<Worker2>{
	WorkerService workerService = new WorkerServiceImpl();

	private Worker2 worker2=new Worker2();

	@Override
	public Worker2 getModel() {
		return worker2;
	}


	public String servletadd() throws UnsupportedEncodingException {

		if(worker2.getFile() !=null){
			File file = new File(ServletActionContext.getServletContext().getRealPath("/upload"));


			System.out.println("路径：："+ServletActionContext.getServletContext().getRealPath("/upload"));

			if(!file.exists()){
				file.mkdirs();
			}

			System.out.println("worker2.getFileContenType()===> "+worker2.getFileContenType());
			
			String name = worker2.getFileFileName();//得到文件名
			int  i = name.lastIndexOf(".");//返回"."所在的下标i
			//name.substring(i, name.length()截取从“.”后面的后缀，如jpg,png，根据新生成的名字命名图片
			String headerUrl = "pic"+worker2.getUsername() + name.substring(i, name.length());
			//根据 parent 抽象路径名和 child 路径名字符串创建一个新 File 实例。
			File savefile = new File(file,headerUrl);

			System.out.println("file===>"+file+"      headerUrl===>"+headerUrl+"   savefile===>savefile"+savefile);

			
			System.out.println( "表单传过来的文件worker2.getFile()===>"+worker2.getFile());
			try {
				//复制文件 copy one file into another
				FileUtils.copyFile(worker2.getFile(), savefile);
			} catch (IOException e) {
				e.printStackTrace();
			}
			worker2.setHeaderUrl("/upload/"+ headerUrl);
		}
		workerService.add(worker2);
		return SUCCESS;
	}

}