第11讲：使用ajax技术实现文件上传功能（jQuery）

原创已于 2023-06-24 10:24:29 修改 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #jquery #javascript

于 2023-06-24 10:22:33 首次发布

本文介绍了如何使用jQuery.form插件实现文件上传功能，通过ajaxform.jsp前端页面和TTServlet.java后台处理实现异步上传，避免页面刷新，提升用户体验。内容包括环境要求、项目结构、前后端实现细节以及运行效果展示。

软件项目开发过程中，文件上传功能是常用技术之一，经常需要上传文件过程中为了更好的体验，不允许刷新当前页面，这样就必须使用异步上传技术了，jQuery提供了异步上传的多种方法，下面跟大家一起探讨使用jQuery.form插件上传文件的功能，具体实现过程如下：

环境要求

序号	资源	说明
1	jQuery插件	ajax通讯基础
2	mysql数据库	存储省市县数据
3	jdk1.8+	开发环境
4	tomcat8.5+	运行环境
5	fastjson	json数据封装对象

项目结构

前端页面（ajaxform.jsp）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>jquery表单应用</title>
		<script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
		<script src="${pageContext.request.contextPath}/js/jquery.form.js"></script>
		<script type="text/javascript">

			/*
			*
			* var options={
				target : '#output',    			// 把服务器返回的内容放入id为output的元素中
				beforeSubmit : beforeCheck,    // 提交前的回调函数(具体方法在后面)
				success : successFun,    		// 提交成功后的回调函数(具体方法在后面)
				url : url,    					//默认是form的action，如果申明，则会覆盖
				type : type,    				// 默认值是form的method("GET" or "POST")，如果声明，则会覆盖
				dataType : “text”,    			// 提交成功后的响应数据类型：text,json,xml
				clearForm : true,    			// 成功提交后，清除所有表单元素的值
				resetForm : true,    			// 成功提交后，重置所有表单元素的值
				timeout : 3000    				// 限制请求的时间，当请求大于3秒后，跳出请求
			}

			*
			* */
			$(function(){
				//表单提交设置参数
				var options={
					beforeSubmit:beforeCheck, //提交前的回调函数,主要的作用是做合法性验证，替换onsubmit事件
					success:successfun,  //提交成功后的回调函数
					dataType: "text" //表单提交成功后的返回数据类型（text,json,xml)
				};
				//隐藏图片控件
				$("#imgs").hide();
				//绑定按钮点击事件
				$("#sub").click(function(){
					//调用ajaxSubmit提交表单数据，等价于点击submit按钮
					$("#uform").ajaxSubmit(options);
				});

				//表单提交前的验证return true验证成功，return false验证失败
				function beforeCheck(){
					var uname = $("#uname").val();
					if(uname==''){
						alert("请输入用户名!");
						return false;
					}
					return true;
				}
				//表单提交成功后的方法
				function successfun(data){
					$("#imgs").attr("src",data);
					//显示图片控件
					$("#imgs").show();
				}
			});
		</script>
	</head>

	<body>
		<form action="ttServlet" method="post" id="uform" >
			用户名：
			<input type="text" name="uname" id="uname"/>
			<br />
			密码：
			<input type="password" name="pwd"/>
			<br />
			头像:
			<input type="file" name="face" id="face" />
			<br />
			<input type="button" id="sub" value="提交" />
			<hr>
			头像预览：<img id="imgs"/>
		</form>
	</body>
</html>

后台实现（TTServlet.java）

package com.servlet;

import java.io.*;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.UUID;

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

@MultipartConfig(maxFileSize = 1024*4000,maxRequestSize = 1024*40000)
@WebServlet(name="TTServlet",value = "/ttServlet")
public class TTServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		doPost(request, response);
	}


	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		System.out.println("uname=" + request.getParameter("uname"));
		System.out.println("pwd=" + request.getParameter("pwd"));
		//获取指定name的文件
		Part part = request.getPart("face");

		String fileDis = part.getHeader("Content-Disposition");
		System.out.println("文件信息："+fileDis);

		//截取字符串，获得文件的后缀
		String suffix = fileDis.substring(fileDis.lastIndexOf("."),fileDis.length()-1 );

		System.out.println("后缀是："+suffix);
		//生成唯一的文件名
		String newname = UUID.randomUUID()+suffix;
		System.out.println("新文件名:"+newname);

		//获取项目在硬盘中的物理路径
		String serverpart = request.getServletContext().getRealPath("upload");
		System.out.println("项目物理路径:"+serverpart);

		//创建以今天日期命名的文件夹
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
		//获取当前日期
		String sysdate = sdf.format(new Date());
		System.out.println("当前日期："+sysdate);

		//判断文件夹是否存在
		//新建一个代表文件夹的file对象
		File file = new File(serverpart+"/"+sysdate);
		if(!file.exists()){
			file.mkdirs();//可以创建多级文件夹
		}

		//将文件保存到新建的文件夹中
		//获取   文件输入流，写到输出流中
		InputStream is = part.getInputStream();

		String filename = serverpart+"/"+sysdate+"/"+newname;
		System.out.println("最终要输出的文件名："+filename);

		//文件输出流
		FileOutputStream fos = new FileOutputStream(filename);
		byte []b = new byte[1024];
		int length = 0;
		//通过文件输入流将内容读取到byte数组中，length 真实读取的字节数，如果读完了，返回-1
		while((length=is.read(b))!=-1){
			fos.write(b);//将byte数组中的数据输出
		}
		//TODO 在此处应该将图片路径信息保存到数据库
		String filepath = "upload/"+sysdate+"/"+newname;
		System.out.println("文件相对路径："+filepath);
		//关闭流
		fos.close();
		is.close();
		//跳转到显示页面
		out.println(filepath);
	}

	public static void main(String[] args) {
		String img = "asdasdasd.jpg";
		System.out.println(UUID.randomUUID().toString()
				+ img.substring(img.indexOf(".") - 1, img.length()));
	}

}