JQuery的Uploadify实现多文件上传

最新推荐文章于 2018-04-11 11:57:39 发布

liangbinny

最新推荐文章于 2018-04-11 11:57:39 发布

阅读量1w

点赞数 1

分类专栏： Web前端 JQuery 文章标签： Uploadify

本文链接：https://blog.csdn.net/liangbinny/article/details/42341029

版权

Web前端同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

JQuery

7 篇文章 0 订阅

订阅专栏

参考：

http://960432397.iteye.com/blog/2038345

JQuery的Uploadify实现多文件上传，支持限制文件大小等，最基本的jsp+servlet方式。

本文例子下载：

http://download.csdn.net/detail/liangbinny/8320481

项目图：

首页 index.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>文件上传</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
	<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="uploadify/jquery.uploadify.min.js"></script>
	<script type="text/javascript">
	$(function(){
		$("#uploadify").uploadify({    
			'debug'     : false, //开启调试
	        'auto'           : false, //是否自动上传   
	        'swf'            : 'uploadify/uploadify.swf',  //引入uploadify.swf  
	        'uploader'       : 'upload',//请求路径  
	        'queueID'        : 'fileQueue',//队列id,用来展示上传进度的  
	        'width'     : '75',  //按钮宽度  
	        'height'    : '24',  //按钮高度
	        'queueSizeLimit' : 3,  //同时上传文件的个数  
	        'fileTypeDesc'   : '视频文件',    //可选择文件类型说明
	        'fileTypeExts'   : '*.jpg;*.gif', //控制可上传文件的扩展名  
	        'multi'          : true,  //允许多文件上传  
	        'buttonText'     : '图片上传',//按钮上的文字  
	        'fileSizeLimit' : '2MB', //设置单个文件大小限制   
	        'fileObjName' : 'uploadify',  //<input type="file"/>的name  
	        'method' : 'post',  
	        'removeCompleted' : true,//上传完成后自动删除队列  
	        'onFallback':function(){    
	            alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");    
	        }, 
	        'onUploadSuccess' : function(file, data, response){//单个文件上传成功触发  
	                               //data就是action中返回来的数据  
	        },'onQueueComplete' : function(){//所有文件上传完成  
	        	alert("文件上传成功!");
	       		}  
	        });
	});
	</script>
  </head>
  
  <body>
   <input type="file" id="uploadify" name="uploadify">  
   <div id="fileQueue"></div>  
   <a href="javascript:$('#uploadify').uploadify('upload','*')">开始上传</a>  
   <a href="javascript:$('#uploadify').uploadify('cancel','*')">取消所有上传</a>  
  </body>
</html>

UploadServlet.java

package com.liangbinny.upload;

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Iterator;
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.disk.DiskFileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.fileupload.util.Streams;


public class UploadServlet extends HttpServlet {

	private static final long serialVersionUID = -5036264969905378310L;

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		super.doGet(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {

		// 设置接收的编码格式
		request.setCharacterEncoding("UTF-8");
		Date date = new Date();// 获取当前时间
		SimpleDateFormat sdfFileName = new SimpleDateFormat("yyyyMMddHHmmss");
		SimpleDateFormat sdfFolderName = new SimpleDateFormat("yyyyMMdd");
		
		String newfileName = sdfFileName.format(date);// 存放文件名称
		String newFolderName = sdfFolderName.format(date);  //存放文件夹名
		
		String fileRealPath = "";// 文件存放真实地址
		String fileRealResistPath = "";// 文件存放真实相对路径

		// 获得容器中上传文件夹所在的物理路径
		String savePath = this.getServletConfig().getServletContext().getRealPath("/") + "\\" + "uploads\\" + newFolderName + "\\";
		System.out.println("上传文件存放路径" + savePath + "; ");
		File file = new File(savePath);
		if (!file.isDirectory()) {
			file.mkdirs();
		}

		try {
			// 名称 界面编码 必须 和request 保存一致..否则乱码
			String firstFileName = "";
			
			DiskFileItemFactory fac = new DiskFileItemFactory();
			ServletFileUpload upload = new ServletFileUpload(fac);
			upload.setHeaderEncoding("UTF-8");
			// 获取多个上传文件
			List fileList = upload.parseRequest(request);
			// 遍历上传文件写入磁盘
			Iterator it = fileList.iterator();
			while (it.hasNext()) {
				Object obit = it.next();
				if (obit instanceof DiskFileItem) {
					DiskFileItem item = (DiskFileItem) obit;

					// 如果item是文件上传表单域
					// 获得文件名及路径
					String fileName = item.getName();
					if (fileName != null) {
						firstFileName = item.getName().substring(item.getName().lastIndexOf("\\") + 1);  //上传的源文件名
						String formatName = firstFileName.substring(firstFileName.lastIndexOf("."));// 获取文件后缀名
						fileRealPath = savePath + newfileName + formatName;// 文件存放真实地址

						BufferedInputStream in = new BufferedInputStream(item.getInputStream());// 获得文件输入流
						BufferedOutputStream outStream = new BufferedOutputStream(new FileOutputStream(new File(fileRealPath)));// 获得文件输出流
						Streams.copy(in, outStream, true);// 开始把文件写到你指定的上传文件夹
						// 上传成功，则插入数据库
						if (new File(fileRealPath).exists()) {
							// 相对路径赋值
							fileRealResistPath = "uploads/" + newFolderName + "/" + fileRealPath.substring(fileRealPath.lastIndexOf("\\") + 1);
							
							// 保存到数据库
							System.out.println("处理的文件名:" + fileName);
							System.out.println("存放的相对路径:" + fileRealResistPath);
						}

					}
				}
			}
		} catch (org.apache.commons.fileupload.FileUploadException ex) {
			ex.printStackTrace();
			System.out.println("没有上传文件");
			return;
		}
		response.getWriter().write("1");

	}

}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	<display-name></display-name>	
	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>
	<servlet>
		<servlet-name>FileUpload</servlet-name>
		<servlet-class>com.liangbinny.upload.UploadServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>FileUpload</servlet-name>
		<url-pattern>/upload</url-pattern>
	</servlet-mapping>
</web-app>

运行例子：