简单的ajax批量上传文件

最新推荐文章于 2025-07-11 11:10:24 发布

也是右移

最新推荐文章于 2025-07-11 11:10:24 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u014104286/article/details/51840686

本文介绍了一种利用JQuery AJAX实现的异步文件上传方法，包括前端页面设计、多文件选择及上传处理，并展示了如何在服务端解析上传的文件。

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

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">在web应用中，客服端向服务端上传数据是不可避免的，上传的数据类型有一般的字符类型，还有就是文件类型。</span>

字符类型的直接使用key取值就可以了，而文件类型的需要做一些相应的处理；而上传文件又是比较耗费时间的，所以能异步上传文件的话那是极好的。下面是我自己在学习中做的小练习，希望能帮助大家

1.首先我们要使用JQuery封装的ajax，所以我引入了jquery-1.11.3.min.js文件：下面是批量上传文件的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>Insert title here</title>
<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#upFile").click(function() {
			//关于[0]的解释
			//因为new FormData的参数需要一个HTMLElement类型的数据，而jQuery得到的是个HTMLElement的集合，
			//哪怕只有一个元素。所以需要用[]取其第一个元素。
			 var formData = new FormData($( "#uploadForm" )[0]);  
			    $.ajax({  
			         url: 'http://localhost:8080${pageContext.request.contextPath }/upload.do' ,  
			         type: 'POST',  
			         data: formData,  
			         async: false,  
			         cache: false,  
			         contentType: false,  
			         processData: false,  
			         success: function (res) { 
			        	// var obj = eval('('+res+')');
			            //alert(obj.name);  
			        	 alert(res);
			         },  
			         error: function (res) {  
			             alert(res);  
			         }  
			    });  
		});
	});
</script>
</head>
<body>
<form id= "uploadForm">  
      <p >指定文件名： <input type="text" name="filename" value= ""/></p >  
      <p >上传文件： <input type="file" name="myfile"/></ p>  
        <p >上传文件： <input type="file" name="myfile"/></ p>  
          <p >上传文件： <input type="file" name="myfile"/></ p>  
      <input type="button" value="上传" id="upFile" />  
</form> 
</body>
</html>

使用 var formData = new FormData();可以使我们的表单数据都以key/value的形式存入request对象中。

下面是服务端解析接收到的数据代码：

@WebServlet("/upload.do")
public class UpLoad extends HttpServlet {
	private static final long serialVersionUID = 1L;
	String filePath = null;

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public UpLoad() {
		super();
		// TODO Auto-generated constructor stub
	}

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		this.doPost(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		request.setCharacterEncoding("UTF-8");
		// 设置返回的字符集的编码
		response.setCharacterEncoding("UTF-8");
		// 设置泛黄的 类型
		response.setContentType("text/html;charset=UTF-8");
		System.out.println("Post");
		// <!-- enctype="multipart/form-data"告诉服务器是一个复杂的表单
		// -->这样是接收不到的，因为数据全部在流里面
		// String name = request.getParameter("username");
		// String gender = request.getParameter("usergender");
		// System.out.println("用户 的姓名："+name+" 性别是"+gender);

		PrintWriter out = null;
		// 首先判断是不是复杂数据的提交
		boolean isMulti = ServletFileUpload.isMultipartContent(request);
		if (isMulti) {

			// 配置磁盘的缓存工厂，接收文件的准备工作
			DiskFileItemFactory factory = new DiskFileItemFactory();
			// 设置缓冲区大小
			factory.setSizeThreshold(1024 * 1024 * 2);
			// 位置和大小
			// 直接传人工程目录下的要刷新工程才可以在web中访问到
			// File file = new
			// File(request.getServletContext().getRealPath("/"));
			// 传到C盘中
			File file = new File("C://myFileUpload/");
			// 如果这个文件不存在我们就创建/
			if (!file.exists()) {
				file.mkdir();
			}
			factory.setRepository(file);
			// 创建我们的服务器解析上次参数的对象
			// 把我们前面设置的磁盘缓存对象传入
			ServletFileUpload servletFileUpload = new ServletFileUpload(factory);
			// 设置上传对象中文件的大小
			servletFileUpload.setFileSizeMax(1024 * 1024 * 2);
			// 设置上传对象总的大小
			servletFileUpload.setSizeMax(1024 * 1024 * 2);
			// 设置上传的字符编码
			servletFileUpload.setHeaderEncoding("UTF-8");

			// Ids ids = new Ids();
			// 处理客服端上传的数据
			out = response.getWriter();
			// 把接受到的数据放入一个list中
			List<FileItem> items = null;
			try {
				//form中的数据会以key/value的形式存在request对象中，我们可以取得全部的key循环判断是否是multi类型数据
				//1.是：保存到服务端
				//2.否：那肯定是表单的key/value数据，根据可以取得value就行
				items = servletFileUpload.parseRequest(request);
			} catch (FileUploadException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
			// 循环判断items
			for (FileItem fileItem : items) {
				// 如果这个item是一般的text之类的那我们就 就是 一般数据为===》字符
				if (fileItem != null) {
					if (fileItem.isFormField()) {
		// 获得在表单中的Name属性getFieldName是相对于得到key的值，getName是得到File的Name
		<span style="white-space:pre">				</span>String fielName = fileItem.getFieldName();
						System.out.println(fielName);
						// System.out.println(fileItem.getString());
						// //解决乱码问题
						System.out.println(fileItem.getString("UTF-8"));
					}
					// 如果是“复杂”的数据
					else {
						// 得到上传文件名
						String reqPath = fileItem.getName();
						System.out.println(reqPath);
						// 在 eclipse的浏览器中会把文件的路径一起带上，
						if (reqPath.indexOf("\\") != -1) {
						reqPath = reqPath.substring(reqPath.lastIndexOf("\\"));
						}
						// 写文件
						filePath = file.toString() + "/" + reqPath;
						// 替换一下文件名，不然在插入数据库的时候回出现错误
						filePath = filePath.replace("\\", "/");
						File upFile = new File(filePath);
						try {
							fileItem.write(upFile);			
						} catch (Exception e) {
							// TODO Auto-generated catch block
							e.printStackTrace();
						}
						filePath = request.getServletContext().getContextPath()
								+ "/" + fileItem.getName();
					}
				}
			}
			out.write("上传成功");
		}
	}
}

注意：这里需要注意上传文件的大小的限制。要导入commons-io-2.4.jar和commons-fileupload-1.3.1.jar这里两个上传文件的包。

demo下载：http://download.youkuaiyun.com/detail/u014104286/9574399