运行效果:
包结构图:
后台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> <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/
相关推荐
里面有个.net文件上传的实例,利用了jQuery上传插件Uploadify ,简单易懂,可以直接用,也可以作为开发的启发
jquery上传插件uploadify+php完美实现强大的文件上传功能实例+程序_【PHP】.rar
上传功能在我们的程序中是经常会用到的,而传统的http上传在... 那么今天我要给大家介绍额就是一款jQuery的无刷新上传插件 -Uploadify,他有免费版和收费版两种,免费版的是用Flash实现的,而收费版的是用html5实现的
UploadiFive是一款来自国外的、优秀的jQuery插件,主要功能是上传文件,支持文件的批量上传、拖拽上传等,是一个易集成的多文件上传解决方案。 其前身Uploadify在很多项目中已被广泛之用,但是Uploadify需要Flash的...
jQuery Uploadify文件批量上传实例 自己对jQuery Uploadify插件稍作整理,样式不合适可以根据自己的需要修改; 可以实现多文件上传,同时显示上传进度条和百分比,上传完毕后将统计上传文件的总数量、文件总大小和...
基于jquery的上传插件Uploadify,无论在功能、外观、可用性和扩展性上都有不错表现,于是研究了一番,同时把jquery-uploadify-2.1版本和jquery-uploadify-3.1版本比较了一下,而且该上传程序就是这两个版本的实例代码...
JQuery uploadify 实现文件批量上传完整例子,所有js,和uploadify插件js 都放在这个例子中
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示。不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用
用ASP.NET实现uploadify多图上传插件的小实例
jquery xheditor是jquery中较好的编辑器插件,而jquery.uploadify也是jquery实现文件上传很优秀的插件,本项目实例解决了两个插件文件上传的问题,对于应用学习两个插件,实现文件上传,具有很好的参考价值,同时本例子是...
首先官方的实例可能看不到,反正我是访问不了的。 接着网上也有很多实例,有的也给出了代码,的确,不方便,因为在复制或者新建文件时还是很麻烦的。 基于3.2的版本,jquery基于1.7.2算最新的。 可以本地列出列表...
asp.net写的一个用jQuery.Uploadify插件实现上传功能的简单控件,附有说明文档,如果出现问题不妨先看下说明文档。欢迎发站内信给出其他建议。
—》最近由于项目需要使用到一个上传插件,在网上发现uploadify挺不错,所以决定使用它,但是官网文档和例子是php的,而项目是SSI框架的,所以自己对uploadify在struts2中的使用进行了一番研究,最终实现了。...
springMVC+uploadify上传图片。
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示。不过官方提供的实例时php版本的,本示例中将在Vs 2008环境里面详细介绍Uploadify在Aspnet中的使用。
本文实例为大家分享了uploadify多图上传具体实现代码,可动态添加上传框,供大家参考,具体内容如下 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; ...
JQUERY Dialog弹出框和JQUERY Uploadify下载插件综合详细参数详解,非常值得收藏,中文描述和实例讲解。
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示。不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载。 首先按下面的步骤来实现一...
uploadify这个插件是基于js里面的jquery库写的。结合了ajax和flash,实现了这个多线程上传的功能。 现在最新版为3.2.1。 在线实例 实例中用到的php文件UploaderDemo.php请在页面下方下载 引入文件 <link rel=”...
7.10 综合案例分析—使用uploadify插件实现文件上传功能 /232 7.10.1 需求分析/232 7.10.2 效果界面/233 7.10.3 功能实现/234 7.10.4 代码分析/236 7.11 本章小结/241 第8章 jQuery UI插件/242 8.1 认识...