源码地址：https://git.oschina.net/zhengweishan/UploadDemo_Java
1、jquery uploadify 下载：http://www.uploadify.com/
2、安装，由于下载下来的例子是php版本的，所以我只留下了主要的几个文件。如图：
![[置顶] jquery使用uploadify插件实现多文件的上传（java版）](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuaXRkYWFuLmNvbS9pbWdzLzIvMi84LzgvNzUvYjJkNDM5MTQwNWI1ZjY5ODI5YzFkODEwYTBiODRkZmUuanBl.jpe?w=700 "[置顶] jquery使用uploadify插件实现多文件的上传（java版）")
3、配置项说明，请自行看文档。文档地址：http://www.uploadify.com/documentation/
4、使用
前台页面：
| 1234567891011121314151617181920212223242526272829303132333435363738394041424344 | <%@ 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><link href="plugin/uploadify/uploadify.css" rel="stylesheet" type="text/css" /><script src="plugin/uploadify/jquery-1.11.3.js" type="text/javascript"></script><script src="plugin/uploadify/jquery.uploadify.js" type="text/javascript"></script><script type="text/javascript"> $(document).ready(function() { $("#uploadify").uploadify({ 'swf' : 'plugin/uploadify/uploadify.swf', 'uploader' : 'UploadServlet', 'folder' : '/upload', 'queueID' : 'fileQueue', 'cancelImg' : 'plugin/uploadify/uploadify-cancel.png', 'buttonText' : '上传文件', 'auto' : false, //设置true 自动上传 设置false还需要手动点击按钮 'multi' : true, 'wmode' : 'transparent', 'simUploadLimit' : 999, 'fileTypeExts' : '*.*', 'fileTypeDesc' : 'All Files' }); }); </script> </head><body><div> <%--用来作为文件队列区域--%> <div id="fileQueue" style="position:absolute; right:50px; bottom:100px;z-index:999"> </div> <input type="file" name="uploadify" id="uploadify"/> <p> <a href="javascript:$('#uploadify').uploadify('upload','*')">上传</a>| <a href="javascript:$('#uploadify').uploadify('cancel','*')">取消上传</a> </p> </div> </body></html> |
后台：
这里需要用到commons-fileupload组件，自行下载（提供的源码中有哦~）。
| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105 | import java.io.BufferedInputStream;import java.io.BufferedOutputStream;import java.io.File;import java.io.FileOutputStream;import java.io.IOException;import java.io.PrintWriter;import java.util.Date;import java.util.Iterator;import java.util.List;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;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.fileupload.util.Streams;/** * Servlet implementation class UploadServlet */@WebServlet("/UploadServlet")public class UploadServlet extends HttpServlet {private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public UploadServlet() { 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//文件存放的目录 File tempDirPath =new File(request.getSession().getServletContext().getRealPath("/")+"\\upload\\"); if(!tempDirPath.exists()){ tempDirPath.mkdirs(); } //创建磁盘文件工厂 DiskFileItemFactory fac = new DiskFileItemFactory(); //创建servlet文件上传组件 ServletFileUpload upload = new ServletFileUpload(fac); //文件列表 List<FileItem> fileList = null; //解析request从而得到前台传过来的文件 try { fileList = upload.parseRequest(request); } catch (FileUploadException ex) { ex.printStackTrace(); return; } //保存后的文件名 String imageName = null; //便利从前台得到的文件列表 Iterator<FileItem> it = fileList.iterator(); while(it.hasNext()){ FileItem item = it.next(); //如果不是普通表单域，当做文件域来处理 if(!item.isFormField()){ imageName = new Date().getTime()+Math.random()*10000+item.getName(); BufferedInputStream in = new BufferedInputStream(item.getInputStream()); BufferedOutputStream out = new BufferedOutputStream( new FileOutputStream(new File(tempDirPath+"\\"+imageName))); Streams.copy(in, out, true); } } // PrintWriter out = null; try { out = encodehead(request, response); } catch (IOException e) { e.printStackTrace(); } //这个地方不能少，否则前台得不到上传的结果 out.write("1"); out.close(); }/** * Ajax辅助方法 获取 PrintWriter * @return * @throws IOException * @throws IOException * request.setCharacterEncoding("utf-8"); response.setContentType("text/html; charset=utf-8"); */ private PrintWriter encodehead(HttpServletRequest request,HttpServletResponse response) throws IOException{ request.setCharacterEncoding("utf-8"); response.setContentType("text/html; charset=utf-8"); return response.getWriter(); } } |
5、最终效果图 有点类似百度上传文件的页面效果 没有百度做的好看哈~ 请勿喷
![[置顶] jquery使用uploadify插件实现多文件的上传（java版）](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuaXRkYWFuLmNvbS9pbWdzLzIvMi83LzMvMS83MjQ3OTNhYWQ4ZTVkMzc3NzVlZmM3NzA3OGQ5YmM2My5qcGU%3D.jpe?w=700 "[置顶] jquery使用uploadify插件实现多文件的上传（java版）")
![[置顶] jquery使用uploadify插件实现多文件的上传（java版）](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuaXRkYWFuLmNvbS9pbWdzLzAvMS82LzEvNDIvYTM3MTg4MTliY2UxODY2YWYzZDc5NDhlNmFiODY5MWMuanBl.jpe?w=700 "[置顶] jquery使用uploadify插件实现多文件的上传（java版）")