java版-JQuery上传插件Uploadify使用实例

摘自：http://itindex.net/detail/47160-java-jquery-%E4%B8%8A%E4%BC%A0

运行效果：

包结构图：

后台JAVA逻辑：

package com.bijian.study;

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 + "/uploads/";

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

    }

}

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.bijian.study.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>

index.jsp：

<%@ page language="java" contentType="text/html; charset=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>Upload</title>

<!--装载文件-->

<link href="css/uploadify.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="uploadify/jquery-1.9.1.js"></script>

<script type="text/javascript" src="uploadify/jquery.uploadify.min.js"></script>

<!--ready事件-->

<script type="text/javascript">

    $(document).ready(function() {

        $("#uploadify").uploadify({

            'uploader' : 'servlet/Upload',

            'swf' : 'uploadify/uploadify.swf',

            'cancelImg' : 'img/uploadify-cancel.png',

            'folder' : 'uploads',//您想将文件保存到的路径

            'queueID' : 'fileQueue',//与下面的id对应

            'queueSizeLimit' : 5,

            'fileDesc' : 'rar文件或zip文件',

            'fileExt' : '*.rar;*.zip', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc

            'auto' : false,

            'multi' : true,

            'simUploadLimit' : 2,

            'buttonText' : '选择文件',

           	'onDialogOpen' : function() {//当选择文件对话框打开时触发

           		alert( 'Open!');

           	},

           	'onSelect' : function(file) {//当每个文件添加至队列后触发

           		alert( 'id: ' + file.id

           				+ ' - 索引: ' + file.index

           				+ ' - 文件名: ' + file.name

           				+ ' - 文件大小: ' + file.size

           				+ ' - 类型: ' + file.type

           				+ ' - 创建日期: ' + file.creationdate

           				+ ' - 修改日期: ' + file.modificationdate

           				+ ' - 文件状态: ' + file.filestatus);

           	},

           	'onSelectError' : function(file,errorCode,errorMsg) {//当文件选定发生错误时触发

           		alert( 'id: ' + file.id

           			+ ' - 索引: ' + file.index

           			+ ' - 文件名: ' + file.name

         			+ ' - 文件大小: ' + file.size

           			+ ' - 类型: ' + file.type

           			+ ' - 创建日期: ' + file.creationdate

           			+ ' - 修改日期: ' + file.modificationdate

           			+ ' - 文件状态: ' + file.filestatus

           			+ ' - 错误代码: ' + errorCode

           			+ ' - 错误信息: ' + errorMsg);

           	},

           	'onDialogClose' : function(swfuploadifyQueue) {//当文件选择对话框关闭时触发

				if( swfuploadifyQueue.filesErrored > 0 ){

          			alert( '添加至队列时有'

						+swfuploadifyQueue.filesErrored

	           			+'个文件发生错误n'

	           			+'错误信息:'

	           			+swfuploadifyQueue.errorMsg

	           			+'n选定的文件数:'

	           			+swfuploadifyQueue.filesSelected

	           			+'n成功添加至队列的文件数:'

	           			+swfuploadifyQueue.filesQueued

	           			+'n队列中的总文件数量:'

	       				+swfuploadifyQueue.queueLength);

           		}

           	},

           	'onQueueComplete' : function(stats) {//当队列中的所有文件全部完成上传时触发

           		alert( '成功上传的文件数: ' + stats.successful_uploads

           			+ ' - 上传出错的文件数: ' + stats.upload_errors

           			+ ' - 取消上传的文件数: ' + stats.upload_cancelled

           			+ ' - 出错的文件数' + stats.queue_errors);

           	},

           	'onUploadComplete' : function(file,swfuploadifyQueue) {//队列中的每个文件上传完成时触发一次

           		alert( 'id: ' + file.id

           			+ ' - 索引: ' + file.index

           			+ ' - 文件名: ' + file.name

           			+ ' - 文件大小: ' + file.size

           			+ ' - 类型: ' + file.type

           			+ ' - 创建日期: ' + file.creationdate

           			+ ' - 修改日期: ' + file.modificationdate

           			+ ' - 文件状态: ' + file.filestatus);

           	},

           	'onUploadError' : function(file,errorCode,errorMsg,errorString,swfuploadifyQueue) {//上传文件出错是触发（每个出错文件触发一次）

           		alert( 'id: ' + file.id

           			+ ' - 索引: ' + file.index

           			+ ' - 文件名: ' + file.name

           			+ ' - 文件大小: ' + file.size

           			+ ' - 类型: ' + file.type

           			+ ' - 创建日期: ' + file.creationdate

           			+ ' - 修改日期: ' + file.modificationdate

           			+ ' - 文件状态: ' + file.filestatus

           			+ ' - 错误代码: ' + errorCode

           			+ ' - 错误描述: ' + errorMsg

           			+ ' - 简要错误描述: ' + errorString);

           	},

           	'onUploadProgress' : function(file,fileBytesLoaded,fileTotalBytes,queueBytesLoaded,swfuploadifyQueueUploadSize) {//上传进度发生变更时触发

           		alert( 'id: ' + file.id

           			+ ' - 索引: ' + file.index

           			+ ' - 文件名: ' + file.name

           			+ ' - 文件大小: ' + file.size

           			+ ' - 类型: ' + file.type

           			+ ' - 创建日期: ' + file.creationdate

           			+ ' - 修改日期: ' + file.modificationdate

           			+ ' - 文件状态: ' + file.filestatus

           			+ ' - 当前文件已上传: ' + fileBytesLoaded

           			+ ' - 当前文件大小: ' + fileTotalBytes

           			+ ' - 队列已上传: ' + queueBytesLoaded

           			+ ' - 队列大小: ' + swfuploadifyQueueUploadSize);

           	},

           	'onUploadStart': function(file) {//上传开始时触发（每个文件触发一次）

           		alert( 'id: ' + file.id

           			+ ' - 索引: ' + file.index

           			+ ' - 文件名: ' + file.name

           			+ ' - 文件大小: ' + file.size

           			+ ' - 类型: ' + file.type

           			+ ' - 创建日期: ' + file.creationdate

           			+ ' - 修改日期: ' + file.modificationdate

           			+ ' - 文件状态: ' + file.filestatus );

           	},

           	'onUploadSuccess' : function(file,data,response) {//上传完成时触发（每个文件触发一次）

           		alert( 'id: ' + file.id

           			+ ' - 索引: ' + file.index

           			+ ' - 文件名: ' + file.name

           			+ ' - 文件大小: ' + file.size

           			+ ' - 类型: ' + file.type

           			+ ' - 创建日期: ' + file.creationdate

           			+ ' - 修改日期: ' + file.modificationdate

           			+ ' - 文件状态: ' + file.filestatus

           			+ ' - 服务器端消息: ' + data

           			+ ' - 是否上传成功: ' + response);

           	}

        });

    });

</script>

</head>

<body>

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

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

    <p>

    	<!-- 上传第一个未上传的文件 -->

      	<a href="javascript:$('#uploadify').uploadify('upload')">上传</a>

      	<!-- 取消第一个未取消的文件 -->

        <a href="javascript:$('#uploadify').uploadify('cancel')">取消上传</a>

        <a href="javascript:$('#uploadify').uploadify('upload','*')">开始上传所有文件</a>&nbsp;

        <a href="javascript:$('#uploadify').uploadify('cancel','*')">取消所有上传</a>

    </p>

</body>

</html>

java版-JQuery上传插件Uploadify使用实例的更多相关文章

JQuery上传插件uploadify优化
旧版的uploadify是基于flash上传的,但是总有那么些问题,让我们用的不是很舒服.今天主要分享下在项目中用uploadify遇到的一些问题,以及优化处理官方下载官方文档官方演示下面是官 ...
jquery上传插件uploadify 报错http error 302 解决方法之一
前段时间用到jquery上传插件uploadify时,始终出现系统报出 http error 302 的错误. 网上大量搜集信息,基本上都是说session值丢失的问题,根据网友提供的解决方案进行修改 ...
【转】JQuery上传插件Uploadify使用详解及错误处理
转自:http://www.jb51.net/article/43498.htm 关于JQuery上传插件Uploadify使用详解网上一大把,基本上内容都一样.我根据网上的步骤配置完成后,会报一些错 ...
JQuery上传插件Uploadify使用详解 asp.net版
先来一个实例 Uploadify插件是JQuery的一个文件支持多文件上传的上传插件,ajax异步上传,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadif ...
jQuery上传插件Uploadify使用帮助
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.它的功能特色总结如下: 支持单文件或多文件上传,可控制并发上传的文件数在服务器端支持各种语言与之配合使用,诸如PHP, ...
JQuery上传插件Uploadify使用详解
本文转载http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html Uploadify是JQuery的一个上传插件,实现的效果非常不错 ...
(转)JQuery上传插件Uploadify使用详解
原文地址:http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html Uploadify是JQuery的一个上传插件,实现的效果非常不 ...
jQuery上传插件Uploadify使用介绍
以图纸资料上传为例,介绍Uploadify插件的使用,插件下载地址 http://www.uploadify.com/download/ 上传页面: 选择文件增加未上传界面: 上传成功预览界面: ...
文件上传利器JQuery上传插件Uploadify
在做日常项目中,经常在后台需要上传图片等资源文件,之前使用过几次这个组件,感觉非常好用 ,但是每次使用的时候都是需要经过一番查阅,所以还不如记住在这里,以后使用的时候就翻翻. 他的官方网站如下:htt ...

随机推荐

PHP 读取EXCEL
PHPExcel 自己下载. PHP读取EXCEL public function import_Excel($file_name){ include_once LIB_ROOT_PATH." ...
jquery validate form 异步提交
jQuery取得select选中的值 jQuery("#select1 option:selected").text(); 相信很多人都用过jquery validate插件,非 ...
java-web-dom4j解析XML-递归方式
<?xml version="1.0" encoding="UTF-8"?><书架> <书出版日期="2013-10 ...
jquery实现导航栏头部点击变换颜色
实现效果如下: 话不多说直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
Java学习笔记--Swing2D图形
1.处理2D图形要想使用java 2D库绘制图形,需要获得一个Graphics2D类对象.这个类是Graphics类的子类.paintComponent方法自动获得一个Graphics2D类对象,我 ...
SGU 294 He's Circles
题意:一个项链有n个珠子,每个珠子为黑色或白色.问有多少种不同的项链? 注意,n的数量十分大,因此,我们枚举i(1<=i<=n),令L=n/i,求出L的欧拉函数,则这些数和L互质,因此gc ...
iOS opencv
1.在iPhone上使用 OpenCV http://blog.csdn.net/kmyhy/article/details/7560472 2. OpenCV iOS Hello¶ http://d ...
HTTP请求&&响应
在视频上截的图....俗话说好记性不如烂笔头,所以就保留下来请求: 响应: 状态码: 请求头和响应头的解释:
apache 配置网站目录,虚拟目录,新端口
1 配置网站目录,以ubuntu为例 1)打开apache的默认配置文件夹:cd /etc/apache2/sites-available 2)打开配置文件,本机为sudo vi 000-defau ...
facl笔记
文件系统访问列表:tom: tom, tom基本组jerry: other:r-- chown FACL:Filesystem Access Control List利用文件扩展保存额外的访问控 ...

java版-JQuery上传插件Uploadify使用实例

java版-JQuery上传插件Uploadify使用实例的更多相关文章

随机推荐

热门专题