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

标签： java jquery 上传 | 发表时间：2013-12-20 21:37 | 作者：bijian1013
出处：http://www.iteye.com

运行效果：


包结构图：

 

后台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>

 

附：

JQuery uploadify官方下载 http://www.uploadify.com/download/

JQuery uploadify官方文档 http://www.uploadify.com/documentation/

JQuery uploadify官方演示 http://www.uploadify.com/demos/



已有 0 人发表留言，猛击->> 这里<<-参与讨论


ITeye推荐



相关 [java jquery 上传] 推荐：

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

- - Web前端 - ITeye博客
'folder' : 'uploads',//您想将文件保存到的路径. 'queueID' : 'fileQueue',//与下面的id对应. 'fileDesc' : 'rar文件或zip文件',. 'fileExt' : '*.rar;*.zip', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc.

jQuery无刷新上传之uploadify简单试用

- - 博客园_首页
      先简单的侃两句：貌似已经有两个月的时间没有写过文章了，不过仍会像以前那样每天至少有一至两个小时是泡在园子里看各位大神的文章. 前些天在研究“ajax无刷新上传”方面的一些插件，用SWFUpload实现了无刷新上传的功能，不过个人觉得不是很完美.      昨天在网上找到了一个叫做uploadify的jquery上传插件，看到园子里有几篇文章也是介绍这个插件的，心想何不用这个试试.

JAVA上传图片的缩放处理

- - CSDN博客推荐文章
  图片上传到服务器后，会根据情况将图片缩小成一个图标，我们可以利用java强大的图形处理功能，对上传的图片进行缩放处理. 　　下面的程序使用jdk1.4中最新的ImageIO对图片进行读写. 使用AffineTransform对图片进行缩放. 　　* @param fromdir 图片的原始目录.

java实现把文件上传至ftp服务器

- - CSDN博客互联网推荐文章
用java实现ftp文件上传. 我使用的是commons-net-1.4.1.zip. 其中包含了众多的java网络编程的工具包. 1　把commons-net-1.4.1.jar包加载到项目工程中去. * Description: 向FTP服务器上传文件. * @param url FTP服务器hostname.

java实现web文件无刷新上传

- - CSDN博客推荐文章
最近在做如何实现文件上传的相关工作，查阅了很多资料，发现网上写的都不是很直观，且调试复杂，经实验成功. 把form的target设为页面里一个看不见的iframe，这样上传时候就不会刷新页面了，比如 ：. .

JSch - Java实现的SFTP（文件上传详解篇）

- - 编程语言 - ITeye博客
JSch是Java Secure Channel的缩写. JSch是一个SSH2的纯Java实现. 它允许你连接到一个SSH服务器，并且可以使用端口转发，X11转发，文件传输等，当然你也可以集成它的功能到你自己的应用程序.   本文只介绍如何使用JSch实现的SFTP功能.   SFTP是Secure File Transfer Protocol的缩写，安全文件传送协议.

20+ 个很棒的 jQuery 文件上传插件或教程（此文值得“推荐”和“收藏”）

- Ashaum - 博客园-首页原创精华区
文件上传是网站很常见的功能之一，通过使用 jQuery 可以让上传过程更加人性化，更好的用户体验. 本文介绍20个jQuery的文件上传插件，其中有一些是教程. Plupload 是一个Web浏览器上的界面友好的文件上传模块，可显示上传进度、图像自动缩略和上传分块. 该插件使用 XHR 用于上传多个文件，支持上传进度显示，但不支持 IE.

JQuery 选择器

- - CSDN博客Web前端推荐文章
}

点击我

.    像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥，因为它并没有将网页内容和行为分离，所以才有JQuery选择器的学习.

点击我

. //给class为demo的元素添加行为.

jquery操作xml

- - CSDN博客Web前端推荐文章
jquery真的很强大，虽然一直在用jquery，不用一直都没有深入，这几天重新学习了一下，不得不感叹她的强大，已经让我深深入迷. 这里记录一下，她是怎么快速地操作xml的.. 这里我们有一个xml文件：. jquery如何操作呢,总的思想，就是和操作dom差不多的方法. 首先我们获取这个文件的内容：（我先引入jquery库哈）.

jQuery JSONP跨域

- - Web前端 - ITeye博客
基于Jquery的Ajax跨域访问. 单点登录服务器(sso服务器). 登录网页项目的时候，由于使用了单点登录，所以页面会跳转到sso服务器，进行统一登录，. 现在需要在该界面增加令牌的认证，但是SSO服务器和令牌服务器部署在不同的服务器，且暂时没有要合并的可能，所以在SSO登录的时候必须要对令牌进行验证，就必须涉及到了跨域访问的问题.