Swfupload实现多文件上传

时间：2021-07-03 18:29:31

需求和解决方案


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

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

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

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


Swf简介


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


实现


上传页面：

<%@ 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
标签：

相关文章