uploadify批量上传文件

原创 2012年03月26日 23:33:28

搜索了一些关于批量上传性能的问题,今天看到了uploadify

觉得特别的不错,用jquery实现了批量的上传功能,不仅强大,同时也实现了进度条的功能

稍稍做一点美化就非常棒的一个操作,下面就简单的总结一下使用这个扩展应用的步骤

http://www.uploadify.com/

去官网上面下载query.uploadify.v2.1.4.js目前我用的最新的是这个版本,不过里面的demo是php的

不过对于js框架的时候,既然php能用java也同样可以,对着例子看了一些网上的例子,做了一个笔记详细写了一下部署过程:

创建了一个web project

commons-fileupload-1.2.2.jar
commons-io-2.0.1.jar

首先把这两个jar文件引入了path

然后创建了一个servlet

Upload.java(用的MyEclipse自动配置了web.xml部署描述符)

//Upload.java
package com.uploadify.servlet;

import java.io.File;
import java.io.IOException;
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.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

import com.uploadify.utils.IPTimeStamp;

public class Upload extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		String savePath = this.getServletConfig().getServletContext()
				.getRealPath("");
		// 得到项目的工作目录
		savePath = savePath + "/uploads/";
		File f1 = new File(savePath);
		// 如果没有的话就创建目录
		if (!f1.exists()) {
			f1.mkdirs();
		}
		DiskFileItemFactory fac = new DiskFileItemFactory();
		ServletFileUpload upload = new ServletFileUpload(fac);
		upload.setHeaderEncoding("utf-8");
		List fileList = null;
		try {
			fileList = upload.parseRequest(request);
		} catch (FileUploadException ex) {
			return;
		}
		Iterator<FileItem> it = fileList.iterator();
		String name = "";
		String extName = "";
		while (it.hasNext()) {
			FileItem item = it.next();
			if (!item.isFormField()) {

				// 解析文件
				name = item.getName();
				long size = item.getSize();
				String type = item.getContentType();
				if (name == null || name.trim().equals("")) {
					continue;
				}
				// 得到文件的扩展名
				if (name.lastIndexOf(".") >= 0) {
					extName = name.substring(name.lastIndexOf("."));
				}
				File file = null;
				do {
					// 利用客户端IP+时间+三位随机数字生成非重复文件名:
					name = new IPTimeStamp().getIPTimeStampRandom();
					file = new File(savePath + name + extName);
				} while (file.exists());
				File saveFile = new File(savePath + name + extName);
				try {
					item.write(saveFile);
				} catch (Exception e) {
					e.printStackTrace();
				}
			}
		}
		response.getWriter().print(name + extName);
	}

}
生成文件名字的Utils类,可以清楚的记录名字,然后对上传的文件进行处理,并且防止文件名字重复

//PTimeStamp.java
package com.uploadify.utils;

import java.net.InetAddress;
import java.net.UnknownHostException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Random;

public class IPTimeStamp {
	private String ip;
	private Date date;
	private SimpleDateFormat format;

	public IPTimeStamp() {
		try {
			ip = InetAddress.getLocalHost().getHostAddress();
		} catch (UnknownHostException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

	public String getTimeStamp() {
		format = new SimpleDateFormat("yyyyMMddHHmmssSSS");
		return format.format(new Date());
	}

	public String addZero(String str, int len) {
		StringBuffer sb = new StringBuffer();
		sb.append(str);
		while (sb.length() < len) {
			sb.insert(0, "0");
		}
		return sb.toString();
	}

	public String getIPTimeStampRandom() {
		StringBuffer sb = new StringBuffer();
		String[] ips = this.ip.split("\\.");

		for (int j = 0; j < ips.length; j++) {
			// System.out.println(ips[j]);
			sb.append(this.addZero(ips[j], 3));
		}
		sb.append(this.getTimeStamp());
		Random rod = new Random();
		for (int i = 0; i < 3; i++) {
			sb.append(rod.nextInt(10));
		}
		return sb.toString();
	}
}


部署描述符

<!--web.xml-->
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" 
	xmlns="http://java.sun.com/xml/ns/j2ee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
	http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  <servlet>
    <servlet-name>Upload</servlet-name>
    <servlet-class>com.uploadify.servlet.Upload</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>Upload</servlet-name>
    <url-pattern>/Upload</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>


在WebROOT下面创建folder->js

放入解压包里面的

jquery.uploadify.v2.1.4.js
jquery.uploadify.v2.1.4.min.js
jquery-1.4.2.min.js
swfobject.js

css->

uploadify.css

images->

cancel.png
<!--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>My JSP 'index.jsp' starting page</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 href="css/uploadify.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="js/swfobject.js"></script>
		<script type="text/javascript" src="js/jquery.uploadify.v2.1.4.js"></script>
		<script type="text/javascript">
        $(document).ready(function() {
            $("#uploadify").uploadify({
                'uploader'       : 'uploadify.swf',
                'script'         : 'Upload',
                'cancelImg'      : 'images/cancel.png',
                'folder'         : 'uploads',
                'queueID'        : 'fileQueue',
                'auto'           : false,
                'multi'          : true,
                'simUploadLimit' : 2,
                'buttonText'     : 'BROWSE'
            });
        });
        </script>
	</head>

	<body>
		<div id="fileQueue"></div>
		<input type="file" name="uploadify" id="uploadify" />
		<p>
			<a href="javascript:jQuery('#uploadify').uploadifyUpload()">开始上传</a> 
			<a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上传</a>
		</p>
	</body>
</html>

验证成功,相当漂亮

fileupload实现多文件批量上传

前提条件: 需要如下架包:下面是maven的配置信息 commons-io commons-io 2.5 commons-fileupload commons-fileup...
  • fangchunlong
  • fangchunlong
  • 2016年07月07日 17:56
  • 11679

jquery uploadify实现一次选择多个文件并上传

  • 2012年02月15日 16:15
  • 943KB
  • 下载

jquery文件批量上传控件Uploadify3.2(java springMVC)

jquery文件批量上传控件Uploadify3.2(java springMVC) 从引用 到jsp写法 到java后台写法的全过程介绍...
  • goodboylllll
  • goodboylllll
  • 2014年11月07日 11:16
  • 13767

【Mongo】uploadify插件帮助实现批量上传

【项目需求】     在整个考试系统中,我们可将其分为三个部分:考试前、考试中以及考试后。最近一周都在做考试前的配置,我负责的是题库模块,学生考试时是需要从题库中抽题的。而题库,又有不同的题型,单选题...
  • u013034223
  • u013034223
  • 2016年04月04日 23:35
  • 1134

JQuery的Uploadify实现多文件上传

JQuery的Uploadify实现多文件上传,支持限制文件大小等,最基本的jsp+servlet方式。...
  • liangbinny
  • liangbinny
  • 2015年01月02日 14:18
  • 7598

基于thinkphp的uploadify上传图功能

php Action 服务器端 /*  * To change this template, choose Tools | Templates  * and open the template ...
  • qq1355541448
  • qq1355541448
  • 2014年06月05日 18:25
  • 6523

asp.net 文件批量选取,批量上传,带进度条,uploadify3.2

最近朋友请帮忙写一个批量上传图片的程序,之前在做一个系统的时候由于时间有限没有多研究,这次花了些时间,总算是可以了。 在现实文件上传进度的同时还要将这些数据上传到文件夹或者数据库,所以就需要异步...
  • wangyizhi58
  • wangyizhi58
  • 2013年03月22日 10:54
  • 3808

使用uploadify组件上传文件

uploadify是和jQuery结合使用的异步上传组件,主要功能是批量上传文件,使用多线程来上传多个组件。 ## 下载并导入js和样式文件 ## 在正式学习uploadify组件之前,首先就是去...
  • mockingbirds
  • mockingbirds
  • 2015年07月11日 22:17
  • 6452

【uploadify2.1使用一】【Spring MVC uploadify2.1】批量文件、图片上传

今天在做一个批量上传图片的需求,google下,觉得uploadify在jquery的上传控件还是挺不错,特写下怎么使用。 1、下载资源包,2.1.0整理,免费分享地址 http://downlo...
  • Dracotianlong
  • Dracotianlong
  • 2013年04月08日 00:15
  • 11108

uploadify批量上传文件

转自http://blog.csdn.net/wclxyn/article/details/7397092 搜索了一些关于批量上传性能的问题,今天看到了uploadify 觉得特别的不错,用j...
  • ice86rain
  • ice86rain
  • 2013年05月30日 20:59
  • 554
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:uploadify批量上传文件
举报原因:
原因补充:

(最多只允许输入30个字)