基于jsp的AJAX多文件上传的实例

最近的项目开发中，遇到了一个多文件上传的问题，即在不刷新页面的情况下，上传多个文件至服务器。现总结分享如下：

本文主要采用了基于jsp的ajax，jquery，servlet等技术。

1.upload.jsp

点击上传时，调用对应的fileupload函数，通过ajax将文件异步传送到servlet中处理。注意在文件上载时，所使用的编码类型应当是“multipart/form-data”，它既可以发送文本数据，也支持二进制数据上载。

<%@ page language="java" contentType="text/html; charset=utf-8" 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" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><base href="<%=basePath%>"><title>Insert title here</title><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/ajaxfileupload.js"></script></head><script language="JavaScript" type="text/javascript">var buildph=0;var typeph=0;var planph=0;function fileupload1（）{if（$（"#locationphoto"）.val（）==""）{alert（"上传文件不能为空！"）;return false;}var file = $（"#locationphoto"）.val（）;var pos=file.lastIndexOf（"\"）;var fileName=file.substring（pos+1）;//获得文件名字 $.ajaxFileUpload（{ url:"PictureServlet";,contentType:"multipart/form-data; text/xml;charset=utf-8",secureuri:false,cache: false,//防止缓存fileElementId:"locationphoto",dataType: "text/xml",success: function （data） {document.getElementById（"locationspan"）.innerHTML = fileName;alert（fileName）;},error: function （data, status, e）{alert（"fail"）;}}）;}function fileupload2（）{if（$（"#buildingphoto"）.val（）==""）{alert（"上传文件不能为空！"）;return false;}var file = $（"#buildingphoto"）.val（）;var pos=file.lastIndexOf（"\"）;var fileName=file.substring（pos+1）;buildph++;$.ajaxFileUpload（{ url:"PictureServlet";,contentType:"multipart/form-data; text/xml;charset=utf-8",secureuri:false,cache: false,//防止缓存fileElementId:"buildingphoto",dataType: "text/xml",success: function （data） {document.getElementById（"buildingspan"+buildph）.innerHTML = fileName;alert（fileName）;},error: function （data, status, e）{alert（"fail"）;}}）;}function fileupload3（）{if（$（"#typePhoto"）.val（）==""）{alert（"上传文件不能为空！"）;return false;}var file = $（"#typePhoto"）.val（）;var pos=file.lastIndexOf（"\"）;var fileName=file.substring（pos+1）;typeph++;$.ajaxFileUpload（{ url:"PictureServlet";,contentType:"multipart/form-data; text/xml;charset=utf-8",secureuri:false,cache: false,//防止缓存fileElementId:"typePhoto",dataType: "text/xml",success: function （data） {document.getElementById（"typespan"+typeph）.innerHTML = fileName;alert（fileName）;},error: function （data, status, e）{alert（"fail"）;}}）;}</script><body><form id="form1" name="form1" method="post" action=""> <table width="663" height="316" align="center"><tr> <td height="30" colspan="2">楼盘位置图：<span id="locationspan" ></span> <input type="file" name="locationphoto" id="locationphoto" value="this.val（）"/> <input type="button" name="fileLoad1" id="fileLoad1" value="上传" onClick="fileupload1（）"/> </td></tr> <tr> <td height="30" colspan="2">楼盘照片： <span id="buildingspan1" ></span> <span id="buildingspan2" ></span> <span id="buildingspan3" ></span> <span id="buildingspan4" ></span> <input type="file" name="buildingphoto" id="buildingphoto" value="this.val（）"/> <input type="button" name="fileLoad2" id="fileLoad2" value="上传" onClick="fileupload2（）"/> </td></tr><tr> <td height="30" colspan="2">楼盘户型图：<span id="typespan1" ></span><span id="typespan2" ></span><span id="typespan3" ></span><span id="typespan4" ></span> <input type="file" name="typePhoto" id="typePhoto" value="this.val（）"/> <input type="button" name="fileLoad3" id="fileLoad3" value="上传" onClick="fileupload3（）"/> </td></tr> </table></form></body></html>

2.PictureServlet.java

通过该servlet接受jsp上传的数据流，存储到相应路径，并解析出文件名。

package com.servlet;import java.io.BufferedOutputStream;import java.io.DataOutputStream;import java.io.FileOutputStream;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.ServletInputStream;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.realty.base.action.BuildingAction;/** * Servlet implementation class PictureServlet */@WebServlet（"/PictureServlet"）public class PictureServlet extends HttpServlet {private static final long serialVersionUID = 1L;/** * @see HttpServlet#HttpServlet（） */public PictureServlet（） {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 stubdoPost（request,response）;}/** * @see HttpServlet#doPost（HttpServletRequest request, HttpServletResponse response） */protected void doPost（HttpServletRequest request, HttpServletResponse response） throws ServletException, IOException {// TODO Auto-generated method stub response.setContentType（"text/xml"）;//是xmlresponse.setHeader（"Cache-Control", "no-cache"）;response.setCharacterEncoding（"UTF-8"）;String filepath ="E:/pic/";//文件上传的路径，实际开发中一般用相对路径String filename = "";String name="";ServletInputStream in = request.getInputStream（）;byte[] buf = new byte[4048];int len = in.readLine（buf, 0, buf.length）;String f = new String（buf, 0, len - 1）;while （（len = in.readLine（buf, 0, buf.length）） ！= -1） {filename = new String（buf, 0, len,"utf-8"）;//解决汉字乱码问题int j = filename.lastIndexOf（"""）;int s = filename.indexOf（"filename"）;name=filename.substring（s+10,j）;filename = name;//通过上述处理可以得到上传的文件名System.out.println（"filename="+filename）;DataOutputStream fileStream = new DataOutputStream（new BufferedOutputStream（new FileOutputStream（filepath+ filename）））;len = in.readLine（buf, 0, buf.length）;len = in.readLine（buf, 0, buf.length）;while （（len = in.readLine（buf, 0, buf.length）） ！= -1） {String tempf = new String（buf, 0, len - 1）;if （tempf.equals（f） || tempf.equals（f + "--"）） {break;}else{ fileStream.write（buf, 0, len）; // 写入}}fileStream.close（）;}PrintWriter out=response.getWriter（）;String result = filename ;out.print（result）;out.close（）;in.close（）; }}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。