Swfupload实现多文件上传

来源：互联网发布：sql server 2008配置编辑：程序博客网时间：2024/04/25 21:07

需求和解决方案

传统的html文件域控件只支持单文件上传，用过网盘的同志都知道，有些时候是必须要使用多文件上传的。比如网上的相册上传照片。

这种需求可以由swfupload实现，115网盘就是使用的这种实现。

演示效果http://demo.swfupload.org/v220/

下载地址http://code.google.com/p/swfupload/

Swf简介

SWFUpload最初是由Vinterwebb.se开发的一个客户端的上传工具. 它结合了FLASH和JavaScript的功能，以提供一种超越了传统的浏览器中<input type="file" />标签提供的文件上传功能。

实现

上传页面：

[html] view plain copy

<%@ page language="java" import="java.util.*" pageEncoding="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>
<link href="<%=basePath%>css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=basePath%>js/swfupload.js"></script>
<script type="text/javascript" src="<%=basePath%>js/swfupload.queue.js"></script>
<script type="text/javascript" src="<%=basePath%>js/fileprogress.js"></script>
<script type="text/javascript" src="<%=basePath%>js/handlers.js"></script>
<script type="text/javascript">
var upload1, upload2;
window.onload = function() {
//在window的载入时初始化swfupload对象
upload1 = new SWFUpload({
//提交路径
upload_url: "upload.action",
//向后台传递额外的参数
//提交到服务器的参数信息，这样就添加了一个param参数，值是uploadParams在服务器端用request.getParameter(“param”)就可以拿到值
post_params: {"name" : "kaobian"},
//上传文件的名称
file_post_name: "file",
file_size_limit : "102400", // 100MB
file_types : "*.*",
file_types_description : "All Files",
file_upload_limit : "10",
file_queue_limit : "0",
// 事件处理
file_dialog_start_handler : fileDialogStart,
file_queued_handler : fileQueued,
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,
upload_start_handler : uploadStart,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete,
// 按钮的处理
button_image_url : "images/XPButtonUploadText_61x22.png",
button_placeholder_id : "spanButtonPlaceholder1",
button_width: 61,
button_height: 22,
// Flash Settings
flash_url : "js/swfupload.swf",
custom_settings : {
progressTarget : "fsUploadProgress1",
cancelButtonId : "btnCancel1"
},
// Debug Settings
debug: false
});
}
</script>
</head>
<body>
<div id="content">
<form action="upload.action" method="post" name="thisform" enctype="multipart/form-data">
<table>
<tr valign="top">
<td>
<div>
<div class="fieldset flash" id="fsUploadProgress1">
<span class="legend">文件上传</span>
</div>
<div style="padding-left: 5px;">
<span id="spanButtonPlaceholder1"></span>
<input id="btnCancel1" type="button" value="Cancel Uploads" onclick="cancelQueue(upload1);" disabled="disabled" style="margin-left: 2px; height: 22px; font-size: 8pt;" />
<br />
</div>
</div>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>

这个文件的重点是:

1.引用文件，这里面引用的js和swf一个都不能少。

2.swfupload对象的初始化，这些js语句配置了一个swfupload对象，理解配置是一个重点。

使用swfupload实现多文件上传的思路是在客户端通过选众多个文件，生成一个文件上传队列，这个队列中的每一个文件就相当于一个传统的文件域。所以在服务器端是没有任何变化的。

完整项目下载

Swfupload + struts2多文件上传案例下载

http://download.csdn.net/detail/yanwushu/4404705

0 0