Uploadify是JQuery的一个上传插件，实现的效果非常不错。
支持批量上传；
带进度显示；
判断文件大小；
下面分别使用commons-fileupload 和struts2来实现一个简单的上传功能。
1,先介绍前台
首先从官网下载Uploadify，本实例使用的uploadify-v3.1
目录结构：
index.jsp页面，采用commons-fileupload方式上传
<%@ page language="java" contentType="text/html; charset=gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Upload</title>
<!--装载文件-->
<link href="uploadify-v3.1/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="uploadify-v3.1/jquery.uploadify-3.1.js"></script>
<script type="text/javascript" src="uploadify-v3.1/swfobject.js"></script>
<!--ready事件-->
<script type="text/javascript">
$(document).ready(function () {
$("#uploadify").uploadify({
'swf': 'uploadify-v3.1/uploadify.swf',
'uploader':'scripts/uploadify',
//'script':'upload!doUpload.action?name=yangxiang',
//'script': 'servlet/Upload?name=yangxiang',
//'cancel' : 'uploadify-v3.1/uploadify-cancel.png',
'queueID' : 'fileQueue', //和存放队列的DIV的id一致
//'fileDataName': 'fileupload', //必须，和以下input的name属性一致
'auto' : false, //是否自动开始
'multi': true, //是否支持多文件上传
'buttonText': 'BROWSE', //按钮上的文字
'simUploadLimit' : 1, //一次同步上传的文件数目
//'sizeLimit': 19871202, //设置单个文件大小限制，单位为byte
'fileSizeLimit' : '6000MB',
'queueSizeLimit' : 10, //队列中同时存在的文件个数限制
//'fileTypeExts': '*.jpg;*.gif;*.jpeg;*.png;*.bmp;*.iso',//允许的格式
//'fileTypeDesc': '支持格式:jpg/gif/jpeg/png/bmp/iso.', //如果配置了以下的'fileExt'属性，那么这个属性是必须的
'onUploadSuccess': function ( fileObj, response, data) {
alert("文件:" + fileObj.name + "上传成功");
},
'onUploadError': function(event, queueID, fileObj) {
alert("文件:" + fileObj.name + "上传失败");
},
'onCancel': function(event, queueID, fileObj){
alert("取消了" + fileObj.name);
}
});
});
</script>
</head>
<body>
<div id="fileQueue" style="width: 30%"></div>
<input type="file" name="file" id="uploadify" />
<p>
<a href="javascript:jQuery('#uploadify').uploadify('upload','*')">开始上传</a>
<a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上传</a>
<a href="upload-struts2.jsp">struts2上传</a>
</p>
</body>
</html>
upload-struts2.jsp页面采用struts2方式上传
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="uploadify-v3.1/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="uploadify-v3.1/jquery.uploadify-3.1.js"></script>
<script type="text/javascript" src="uploadify-v3.1/swfobject.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#file").uploadify({
'swf' : '${pageContext.request.contextPath}/uploadify-v3.1/uploadify.swf',
'uploader' : 'controlor/upload.action',//servlet的路径或者.jsp 这是访问servlet 'scripts/uploadif'
'queueID' : 'fileQueue', //和存放队列的DIV的id一致
'auto' : false, //是否自动开始
'multi': false, //是否支持多文件上传
'buttonText': '选择文件', //按钮上的文字
'simUploadLimit' : 1, //一次同步上传的文件数目
'fileSizeLimit' : '1GB',
'queueSizeLimit' : 1, //队列中同时存在的文件个数限制
// 'formData' :{'path':path}, // 多个参数用逗号隔开 'name':$('#name').val(),'num':$('#num').val(),'ttl':$('#ttl').val()
'fileObjName' : 'file',//和input的name属性值保持一致就好，Struts2就能处理了
'onSelect' :function(file)
{
$("#a_upload").show();
},
'onUploadSuccess': function ( fileObj, response, data) {
var value = response ;
if("fail" == value)
{
$("#a_upload").hide();
alert("文件:" + fileObj.name + "上传失败");
}else if("exist" == value)
{
$("#a_upload").hide();
alert(fileObj.name + "文件名重复");
}else if("existBlank" == value)
{
$("#a_upload").hide();
alert(fileObj.name + "文件名存在空格");
}else if("outOfSize" == value)
{
$("#a_upload").hide();
alert("超出容量大小");
}else
{
alert("文件:" + fileObj.name + "上传成功");
//window.location.href="${pageContext.request.contextPath}/controlor/controlorCloudStorage.html"
}
},
'onUploadError': function(event, queueID, fileObj,errorObj) {
if (errorObj.type === "File Size"){
alert('超过文件上传大小限制（1G）！');
return;
}
alert("文件:" + fileObj.name + "上传失败");
},
'onCancel': function(event, queueID, fileObj){
alert("取消了" + fileObj.name);
}
});
});
</script>
<style type="text/css">
body {
margin:0;
padding:0;
}
#fileUploader{
float:left;
}
</style>
</head>
<body>
<table width="100%">
<tr>
<td valign="middle">
<div id="fileQueue" style="margin-bottom:10px;"></div>
<input type="file" name="file" id="file"/>
<input type="button" value="上传" onclick="javascript:jQuery('#file').uploadify('upload','*')" id="a_upload" />
<div style="padding-top:10px; clear:both"><font color="ff6600">注：单个文件1G以内,同一目录下文件名不能相同</font></div>
</td>
</tr>
</table>
</body>
</html>
2，后台实现
commons-fileupload方式：
Uploadify.java：
package com.servlet;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
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 org.apache.commons.fileupload.util.Streams;
public class Uploadify extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* 实现多文件的同时上传
*/
public void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
//设置接收的编码格式
request.setCharacterEncoding("UTF-8");
Date date = new Date();//获取当前时间
SimpleDateFormat sdfFileName = new SimpleDateFormat("yyyyMMddHHmmss");
SimpleDateFormat sdfFolder = new SimpleDateFormat("yyMM");
String newfileName = sdfFileName.format(date);//文件名称
String fileRealPath = "";//文件存放真实地址
String fileRealResistPath = "";//文件存放真实相对路径
//名称 界面编码 必须 和request 保存一致..否则乱码
String name = request.getParameter("name");
String firstFileName="";
// 获得容器中上传文件夹所在的物理路径
String savePath = this.getServletConfig().getServletContext().getRealPath("/") + "uploads\\" + sdfFolder.format(date) +"\\";
System.out.println("路径" + savePath);
File file = new File(savePath);
if (!file.isDirectory()) {
file.mkdir();
}
try {
DiskFileItemFactory fac = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(fac);
upload.setHeaderEncoding("UTF-8");
// 获取多个上传文件
List fileList = fileList = upload.parseRequest(request);
// 遍历上传文件写入磁盘
Iterator it = fileList.iterator();
while (it.hasNext()) {
FileItem item = (FileItem) it.next();
// 如果item是文件上传表单域
// 获得文件名及路径
String fileName = item.getName();
if (fileName != null) {
firstFileName=item.getName().substring(item.getName().lastIndexOf("\\")+1);
String formatName = firstFileName.substring(firstFileName.lastIndexOf("."));//获取文件后缀名
fileRealPath = savePath + newfileName+ formatName;//文件存放真实地址
BufferedInputStream in = new BufferedInputStream(item.getInputStream());// 获得文件输入流
BufferedOutputStream outStream = new BufferedOutputStream(new FileOutputStream(new File(fileRealPath)));// 获得文件输出流
Streams.copy(in, outStream, true);// 开始把文件写到你指定的上传文件夹
//上传成功，则插入数据库
if (new File(fileRealPath).exists()) {
//虚拟路径赋值
fileRealResistPath=sdfFolder.format(date)+"/"+fileRealPath.substring(fileRealPath.lastIndexOf("\\")+1);
//保存到数据库
System.out.println("保存到数据库:");
System.out.println("name:"+name);
System.out.println("虚拟路径:"+fileRealResistPath);
}
}
}
} catch (FileUploadException ex) {
ex.printStackTrace();
System.out.println("没有上传文件");
return;
}
response.getWriter().write("1");
}
public void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doGet(req, resp);
}
}
struts2方式实现：
package com.struts;
import java.io.File;
import java.io.FileWriter;
import java.io.IOException;
import java.text.DateFormat;
import java.text.DecimalFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Random;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.io.FileUtils;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
public class ControlorAction extends ActionSupport {
private File file;
private String fileFileName;
private String fileContentType;
private String path = "";
private String errorCode = "";
String msg = "";
/**
* 控制台-云存储,上传文件操作
*
* @return
*/
public void upload() {
String result = "fail";
HttpServletResponse response = null;
try {
response = ServletActionContext.getResponse();
if (null != file) {
String targetDirectory = ServletActionContext
.getServletContext().getRealPath("/uploads");
String targetFileName = generateFileName(fileFileName);
File target = new File(targetDirectory, targetFileName);
if (!file.exists()) {
// 处理文件大小为0kb的情况
file = new File(file.getPath());
FileWriter fileWriter = new FileWriter(file);
fileWriter.write(" ");
fileWriter.flush();
fileWriter.close();
}
FileUtils.copyFile(file, target);
result = "success";
}
} catch (Exception e) {
e.printStackTrace();
}
try {
response.getWriter().write(result);
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 生成文件名
*
* @param fileName
* @return
*/
private String generateFileName(String fileName) {
DateFormat format = new SimpleDateFormat("yyMMddHHmmss");
String formatDate = format.format(new Date());
int random = new Random().nextInt(10000);
int position = fileName.lastIndexOf(".");
String extension = fileName.substring(position);
return formatDate + random + extension;
}
public File getFile() {
return file;
}
public void setFile(File file) {
this.file = file;
}
public String getFileFileName() {
return fileFileName;
}
public void setFileFileName(String fileFileName) {
this.fileFileName = fileFileName;
}
public String getFileContentType() {
return fileContentType;
}
public void setFileContentType(String fileContentType) {
this.fileContentType = fileContentType;
}
public String getPath() {
return path;
}
public void setPath(String path) {
this.path = path;
}
public String getErrorCode() {
return errorCode;
}
public void setErrorCode(String errorCode) {
this.errorCode = errorCode;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
/**
* 文件大小换上为bite
*
* @param s
* @return
*/
private long getFileSizeByBite(String s) {
long size = 0;
size = Long.parseLong(s) * 1073741824;
/*
* if (s.lastIndexOf("G") != -1 || s.lastIndexOf("g") != -1) { s =
* s.substring(0, s.length() - 1); size = Long.parseLong(s) *
* 1073741824; } else if (s.lastIndexOf("M") != -1 || s.lastIndexOf("m")
* != -1) { s = s.substring(0, s.length() - 1); size = Long.parseLong(s)
* * 1048576; } else if (s.lastIndexOf("T") != -1 || s.lastIndexOf("t")
* != -1) { s = s.substring(0, s.length() - 1); size = Long.parseLong(s)
* * 1024 * 1073741824; }
*/
return size;
}
public String formetFileSize(long fileS) {// 转换文件大小
DecimalFormat df = new DecimalFormat("#.00");
String fileSizeString = "";
if (fileS < 1024) {
fileSizeString = df.format((double) fileS) + "B";
} else if (fileS < 1048576) {
fileSizeString = df.format((double) fileS / 1024) + "K";
} else if (fileS < 1073741824) {
fileSizeString = df.format((double) fileS / 1048576) + "M";
} else {
fileSizeString = df.format((double) fileS / 1073741824) + "G";
}
return fileSizeString;
}
}
- 大小: 5.7 KB
分享到：
相关推荐
要实现JQuery uploadify批量上传，你需要以下步骤： 1. **引入依赖**：确保你的页面已经引入了JQuery库和Uploadify插件的JavaScript和CSS文件。通常，它们分别位于`jquery.js`、`uploadify.js`和`uploadify.css`。 ...
在网页开发中，jQuery Uploadify是一个非常流行的插件，它允许用户实现批量文件上传功能，大大提升了用户体验。本文将深入探讨如何使用jQuery Uploadify来实现这一功能，以及它的工作原理和核心配置。 jQuery ...
《jQuery Uploadify批量上传中文版详解》 在Web开发中，文件上传是一项常见的功能，而jQuery Uploadify插件因其简洁的API和强大的功能，成为众多开发者首选的批量上传解决方案。尤其是其支持中文版本，更是方便了...
**jQuery Uploadify与Java文件上传** 在Web开发中，文件上传功能是不可或缺的一部分。`jQuery Uploadify`是一款基于JavaScript和jQuery的插件，它提供了一种优雅的方式来进行多文件上传，具有良好的用户体验和丰富...
jQuery Uploadify是一款基于jQuery的文件上传插件，它提供了用户友好的界面，支持批量上传以及实时的文件上传进度显示。尤其在处理大文件上传时，Uploadify能有效提高用户体验，因为它允许分块上传，并且在上传过程...
在使用jQuery.uploadify.js时，开发者可以自定义各种参数来调整上传行为，如设置上传的文件类型、大小限制、上传进度显示等。同时，它还提供了丰富的回调函数，允许开发者在文件选择、上传开始、上传成功或失败等...
Uploadify是jQuery的一个插件，提供了一种优雅的文件上传用户体验，支持多文件选择、进度条显示、错误处理等功能。 2. **HTML5 File API**：Uploadify利用了HTML5的File API，允许在客户端进行文件操作，如读取、...
首先，`jQuery Uploadify`是一款基于jQuery的插件，它通过AJAX技术实现了文件的异步上传，支持多文件选择和上传进度显示。在ASP.NET项目中，我们需要引入jQuery库和Uploadify的相关CSS及JavaScript文件。这些文件...
uploadIfy是基于JQuery的一个文件上传插件，它支持单个和批量文件上传，具有进度条显示、预览、错误处理等功能。在我们的案例中，uploadIfy提供了用户友好的界面，使得用户可以方便地选择多个文件进行上传，并实时...
jQueryUpLoadify是一款基于jQuery的文件上传插件，它与.NET 4.0框架结合，提供了高效、便捷的批量文件上传功能。这个插件在Web开发中被广泛使用，因为它可以极大地改善用户交互体验，使得文件上传过程变得更加直观和...
Uploadify是一个基于jQuery的开源插件，它提供了一种优雅的方式来处理文件上传，支持多文件选择、预览、进度条显示等功能，极大地改善了用户体验。它可以与多种服务器端语言（如C#）配合使用。 2. **C#后端处理**...
- **事件监听**：可以通过设置事件处理器来监听文件选择、上传进度、上传成功或失败等事件，从而实现自定义的反馈和处理逻辑。 5. **配置选项**： Uploadify有许多可配置的选项，例如： - `uploader`：指定...
ASP.NET结合jQuery Uploadify实现文件异步上传是一种常见的前端与后端交互技术，它极大地提升了用户体验，使得用户在上传大文件时无需等待页面刷新。在这个过程中，jQuery Uploadify插件负责前端的文件选择和上传...
jQuery Uploadify插件为开发者提供了一个强大的解决方案，它允许用户批量上传文件，并且在上传过程中显示进度条，极大地提升了用户体验。本文将深入探讨jQuery Uploadify的工作原理、主要功能以及如何在项目中应用。...
在本文中，我们将深入探讨如何使用Jquery Uploadify插件实现多文件上传功能，并结合进度条显示上传进度，同时传递自定义参数。Jquery Uploadify是一个广泛使用的jQuery插件，它使得在网页上进行文件上传变得简单而...
**jQueryUploadify** 是一个基于jQuery的插件，专门用于实现网页上的批量文件上传功能。这个插件在web开发中非常实用，因为它简化了文件上传的复杂性，提供了用户友好的界面和高效的文件处理能力。 批量上传是现代...
**jQuery Uploadify** 是一个基于jQuery的文件上传插件，它允许用户在Web应用程序中实现异步、批量或单个文件上传功能。该插件以其易用性、自定义性和高性能而受到开发者们的欢迎。在描述中提到，可能有些初学者在...
jQuery Uploadify 是由Aaron Kurtz 创建的一款基于 jQuery 的开源插件，它提供了一种异步的多文件上传方式，支持批量上传、进度条显示、预览功能等。通过 Flash 或 HTML5 技术，Uploadify 可以在多种浏览器上运行，...
其中，jQuery Uploadify 是一个广泛使用的批量文件上传插件。它允许用户通过拖放或选择文件的方式实现快速、批量的文件上传，极大地提升了文件上传的效率和便捷性。 **Uploadify 插件特性** 1. **批量上传**：...