Jsp中Uploadify插件的使用（jQuery上传插件）(转)

hz_chenwenbiao

浏览: 1010570 次
性别:
来自: 广州

最近访客更多访客>>

linqingrui1985

zhongguocxy

ccsxin201

langgufu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

技术文章

jQuery JSP Servlet JavaScript CSS

该插件使用的是jQuery，Flash和后端（您选择哪种语言实现的上传）脚本的组合。

如何来使用它？

——执行此插件非常简单，只需在jQuery函数中调用即可，先快速让

此功能跑起来。

1、下载最新的zip压缩包 http://www.uploadify.com

2、从其中提取文件。

下载插件安装包后，可以看到官方给出的例子。里面文件夹的几个主要文件：jquery.uploadify.js(完成上传功能的脚本文件，在调用页面引用)、uploadify.css(外观样式表)、uploader.swf(上传控件的主体文件，flash控件)、upload.php(服务器端处理文件，官方仅提供了php版的)。(我下载的是jquery.uploadify-v2.1.0.zip，将解压后的文件除com和example文件夹外都加入到工程里去，文件结构与下图有所差别)

下面我使用的是在MyEclipse部署的java版。注意：需要加入三个commons.jar包。

3、导入default.css,uploadify.css，jQuery脚本，swfobject脚本和Uploadify插件。并且添加调用插件使用$，在您的网页的<head>部分ready事件：

<%@ page language="java" contentType="text/html; charset=utf-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>

		<title>Upload</title>


		<!--装载文件-->
		<link href="jquery/uploadify.css" rel="stylesheet" type="text/css" />

		<script type="text/javascript" src="jquery/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="jquery/swfobject.js"></script>
		<script type="text/javascript"
			src="jquery/jquery.uploadify.v2.1.0.min.js"></script>

		<!--ready事件-->

		<script type="text/javascript">
	$(document).ready(
			function() {
				$("#uploadify").uploadify( {//初始化函数

							'uploader' : 'uploadify.swf',//flash文件位置，注意路径
							'script' : 'servlet/Upload',//后台处理的请求
							'cancelImg' : 'jquery/cancel.png',//取消按钮图片
							'folder' : 'jquery/uploadsFolder',//您想将文件保存到的路径，将auto设置为true里才有用，不然跳到类里去处理，那就那里说了算
							'queueID' : 'fileQueue',//与下面的上传文件列表id对应
							'queueSizeLimit' : 8,//上传文件的数量
							'scriptData' : {
								'a' : 'value1',
								'b' : 'value2'
							},//向后台传的数据
							'fileDesc' : 'rar文件或zip文件',//上传文件类型说明
							//    'fileExt' :'*.rar;*.zip;*txt,*doc,*docx', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc
							'method' : 'get',//如果向后台传输数据，必须是get
							//    'sizeLimit':1000000,//文件上传的大小限制，单位是字节
							'auto' : false,//是否自动上传
							'multi' : true,
							'simUploadLimit' : 8,//同时上传文件的数量，设置了这个参数后，那么你会因设置multi:true和queueSizeLimit：8而可以多选8个文件，但如果一旦你将simUploadLimit也设置了，那么只会上传这个参数指定的文件个数，其它就上传不了
							'buttonText' : 'BROWSE',//浏览按钮图片
							'onComplete' : function(event, queueID, fileObj,
									serverData, data) {//当上传完成后的回调函数，ajax方式哦~~
								alert(data.speed);
							}
						});
			});
</script>
	</head>

	<body>

		<div id="fileQueue"></div>

		<input type="file" name="uploadify" id="uploadify" />

		<p>

			<a href="javascript:jQuery('#uploadify').uploadifyUpload()">开始上传</a>&nbsp;

			<a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上传</a>

		</p>

	</body>

</html>

4、后台处理的upload.java

 package com.xzit.upload;

import java.io.File;

import java.io.IOException;

import java.util.Iterator;

import java.util.List;

import java.util.UUID;

 

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;

 

@SuppressWarnings("serial")

public class Upload extends HttpServlet {

    @SuppressWarnings("unchecked")

    public void doPost(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        String savePath = this.getServletConfig().getServletContext()

                .getRealPath("");

        savePath = savePath + "/uploadsFolder/";

        File f1 = new File(savePath);

        System.out.println(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();

                System.out.println(size + " " + type);

                if (name == null || name.trim().equals("")) {

                    continue;

                }

                //扩展名格式： 

                if (name.lastIndexOf(".") >= 0) {

                    extName = name.substring(name.lastIndexOf("."));

                }

                File file = null;

                do {

                    //生成文件名：

                    name = UUID.randomUUID().toString();

                    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);

    }

}

5、配置处理的servlet

<?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">

	<!-- 上传的servlet配置 -->
	<servlet>
		<servlet-name>upload</servlet-name>
		<servlet-class>com.xzit.upload.Upload</servlet-class>
	</servlet>

	<servlet-mapping>
		<servlet-name>upload</servlet-name>
		<url-pattern>/servlet/Upload</url-pattern>
	</servlet-mapping>



	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>
</web-app>

到这里就ok了哦，可用http://localhost:8080/UploadifyTest/index.jsp进行访问。

下篇将对插件的可选参数作详细地介绍，也可参考官方的参考文档。http://www.uploadify.com/documentation/

UploadifyTest.rar (369.8 KB)
下载次数: 705

分享到：

Log4j与common-logging（转） | Org.springframework.orm.hibernate3.*类讲 ...

2010-10-08 20:23
浏览 6534
评论(3)
分类:编程语言
查看更多

3 楼 heymaomao 2012-01-06

偷别人的文章~~~

2 楼 qin_eye 2011-06-22

同志，太谢谢你了，找了好久好久啊。。

1 楼 WindMill 2011-06-13

可以下载啊！haha

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论