GooUploader 控件实现上传文件

最新推荐文章于 2020-11-21 17:49:25 发布

a ni you

最新推荐文章于 2020-11-21 17:49:25 发布

阅读量1.9k

点赞数

分类专栏： javaWeb 文章标签：控件 jquery upload

本文链接：https://blog.youkuaiyun.com/itlqi/article/details/46765695

版权

javaWeb 专栏收录该内容

19 篇文章

订阅专栏

要实现多文件上传，也就是批量上传文件。之前批量上传的做法是利用js或jquery来动态添加删除<input type="file" name="file" />的感觉这样用户体验不太好，在网上搜了半天得到GooUploader这个控件，感觉还不错！

可设定为是否单个上传,或者是批量上传;
可在上传过程中取消上传(单个或者批量取消);
在批量选择文件后,可以手工选择上传其中部分文件;
可在上传文件时顺带上传REQUEST传参,如SESSION_ID;
选择批量文件,在上传前,用户还可删除其中几个不想上传的文件;
本控件内置一个保存了文件列表信息的数组$fileList，其单元为JSON对象，保存了每个文件的ID，名称，类型，大小等信息；
可自定义按钮显示文字，文件上传的服务器端地址，以及SWF控件相对于当前网页的相对路径
本个控件包是建立在JSP基础上为大家展示上传效的，但实际该控件有用的部分仅在客户端前台;后台代码可以全部推翻，重新用PHP，.NET等其它动态语言编写
使用了本控件后，在后台编写代码时，不必编写实时监控文件上传进度的复杂代码，只用编写简单的处理保存上传文件的代码即可，因为FLASH插件会自动帮助算出上传进度，并实时定时给控件提供进度显示数据，这样就减轻了后台开发人员的工作量；
基于上一点，本控件前台也不会以长轮询方式访问服务器端，以获取文件上传进度情况，而是自己定时计算以上传的字节总数。因此当上传一个文件时，FLASH插件只会发一次传输请求，这样就改善了效率。

本控件兼容IE6--IE8,Firefox,chrome浏览器，但需要FLASH PLAYER 9版本以上的支持

我用两种方式一种springmvc 一种 servlet 废话多说了直接看效果

项目结构如下：

1、servlet实现代码

package com.hosenses.filemanage.action;

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItemIterator;
import org.apache.commons.fileupload.FileItemStream;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.fileupload.util.Streams;

/**
 * Servlet implementation class
 */
public class ServletUpload extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		try {
			// 设置编码
			request.setCharacterEncoding("UTF-8");
			// 判断文件上传内容信息
			if (ServletFileUpload.isMultipartContent(request)) {

				// 当文件比较 多事 直接保存到内存中
				DiskFileItemFactory dff = new DiskFileItemFactory();
				// 临时保存路径
				// dff.setRepository(this.tmpDir);
				// 文件内容大小
				dff.setSizeThreshold(1024000);
				// 文件上传
				ServletFileUpload sfu = new ServletFileUpload(dff);
				sfu.setFileSizeMax(109999999L);
				sfu.setSizeMax(999999999L);
				FileItemIterator fii = sfu.getItemIterator(request);

				// 文件保存路径
				// 获取文件 存储位置
				String realPath = request.getSession().getServletContext()
						.getRealPath("/uploadFile");

				while (fii.hasNext()) {
					FileItemStream fis = fii.next();
					if ((!fis.isFormField()) && (fis.getName().length() > 0)) {
						System.out.println("文件名字：" + fis.getName() + "文件大小；"
								+ fis.getFieldName());
						String fileName = fis.getName();
						BufferedInputStream in = new BufferedInputStream(
								fis.openStream());
						BufferedOutputStream out = new BufferedOutputStream(
								new FileOutputStream(new File(realPath + "\\"
										+ fileName)));
						Streams.copy(in, out, true);
					}
				}
				response.getWriter().println("File upload successfully!!!");
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

2、springmvc实现

package com.hosenses.filemanage.action;

import java.io.File;
import java.io.IOException;
import java.util.Iterator;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
import org.springframework.web.multipart.support.DefaultMultipartHttpServletRequest;


@Controller
public class FileCollont {
	
	/**
	 * 上传方法
	 * @param request
	 * @param response
	 * @throws IllegalStateException
	 * @throws IOException
	 */
	@RequestMapping("/upload.act")
	@ResponseBody
	public void uploadFile(HttpServletRequest request,HttpServletResponse response) throws IllegalStateException, IOException {  
		
		request.setCharacterEncoding("utf-8");
		//创建一个通用的多部分解析器  
        CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());  
        //判断 request 是否有文件上传,即多部分请求  
        if(multipartResolver.isMultipart(request)){  
            //转换成多部分request    
            MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest)request;  
           
            //取得request中的所有文件名  
            Iterator<String> iter = multiRequest.getFileNames();  
            //获取文件 存储位置  
            String realPath = request.getSession().getServletContext()  
                    .getRealPath("/uploadFile");  
            System.out.println(realPath);
            File pathFile = new File(realPath);  
            if (!pathFile.exists()) {  
                //文件夹不存 创建文件  
                pathFile.mkdirs();  
            }  
            while(iter.hasNext()){  
                //取得上传文件  
                MultipartFile file = multiRequest.getFile(iter.next());  
                if(file != null){  
                    //取得当前上传文件的文件名称  
                    String myFileName = file.getOriginalFilename();
                    //copy到服务器上
                    file.transferTo(new File(realPath + "/" + file.getOriginalFilename()));  
                    System.out.println(myFileName);
                }  
            }  
              
        }  
    }  
	

	@RequestMapping("/gooUploader.act")
	@ResponseBody
	public void gooUploader(HttpServletRequest request){
		
		try {
			DefaultMultipartHttpServletRequest mulRequest = (DefaultMultipartHttpServletRequest) request;
			List<MultipartFile> multipartFileList = mulRequest.getFiles("Filedata");

			//创建上传类  创建一个磁盘工厂
			ServletFileUpload fileUpload = new ServletFileUpload(new DiskFileItemFactory());
			//设置上传编码
			fileUpload.setHeaderEncoding("utf-8");
			Iterator<MultipartFile> it = multipartFileList.iterator();
			//获取文件 存储位置  
            String realPath = request.getSession().getServletContext()  
                    .getRealPath("/uploadFile");  
            System.out.println(realPath);
            File pathFile = new File(realPath);  
            if (!pathFile.exists()) {  
                //文件夹不存 创建文件  
                pathFile.mkdirs();  
            }  
			  while(it.hasNext()){  
	                //取得上传文件  
	                MultipartFile file = it.next();  
	                if(file != null){  
	                    //取得当前上传文件的文件名称  
	                    String myFileName = file.getOriginalFilename();
	                    //copy到服务器上
	                    file.transferTo(new File(realPath + "/" + file.getOriginalFilename()));  
	                    System.out.println(myFileName);
	                }  
	            }  
		}catch(Exception e){
			e.printStackTrace();
		}
	}
}

3、html代码

<%@ 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文件上传控件GooUploader</title>
<link rel="stylesheet" type="text/css" href="codebase/GooUploader.css" />
<script type="text/javascript" src="codebase/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="codebase/GooUploader.js"></script>
<script type="text/javascript" src="codebase/swfupload/swfupload.js"></script>
<script type="text/javascript">  
var demo;  
//var  post_params = {session_id:"f1423rwe543t4wrtwerwe"};  
//构造函数 参数
var property={  
    width:700,  //控件的宽度，默认时可不填
    height:300,  //控件的高度，默认时可不填
    multiple:true,  //如果它为TRUE，则允许批量上传，如为FALSE，则为只允许单个文件一传
    file_post_name : "Filedata",  
    file_types:"*.jpg;*.gif",  //可上传的文件类型，“如*.jpg;*.gif”，默认为“*.*”，用分号隔开
  //  file_types_description: "Web Image Files",  
   // post_params:post_params,   //一个JSON数据，文件上传时一同传至服务器端的REUQUEST传参
    btn_add_text:"添加",  //添加按钮显示文字
    btn_up_text:"上传",   //上传按钮显示文字（当multiple为FALSE时，此项无作作，不必填）
    btn_cancel_text:"放弃", //取消按钮显示文字（当multiple为FALSE时，此项无作作，不必填） 
    btn_clean_text:"清空",   //清空按钮显示文字（当multiple为FALSE时，此项无作作，不必填）
    op_del_text:"单项删除",  //文件列表中快捷操作图标“单项删除”的注释文字
    op_up_text:"单项上传",  //文件列表中快捷操作图标“单项上传”的注释文字
    op_fail_text:"上传失败",  //文件列表中快捷操作图标“上传失败”的注释文字
    op_ok_text:"上传成功",  //文件列表中快捷操作图标“上传成功”的注释文字
    op_no_text:"取消上传",   //文件列表中快捷操作图标“取消上传”的注释文字
    upload_url:'<%=basePath%>ServletUpload',  //上传目标服务器的相对路径，比必须是相对于SWF插件所在的路径，或者是绝对路径
    flash_url :"codebase/swfupload.swf", //property.flash_url||"swfupload.swf"SWF插件相对于网页文件所在相对路径
  //  file_size_limit : file_size_limit||0,//文件大小限制，单位为KB，0表示大小无限制
  //file_upload_limit: file_upload_limit||0,//允许上传的最多文件数量,0表示大小无限制
  //  file_queue_limit:property.file_queue_limit||0,
};  

$(document).ready(function(){  
  demo=$.createGooUploader($("#demo"),property)  ;
});  
</script>
</head>
<body>

	<div id="demo"></div>
</body>
</html>

GooUploader 包下载地址：http://download.youkuaiyun.com/detail/itlqi/8871333

以上项目下载地址不含jar：http://download.youkuaiyun.com/detail/itlqi/8871339