Swfupload实现多文件上传

发布时间：2020-12-15 18:40:50 所属栏目：百科来源：网络整理

导读：需求和解决方案传统的 html 文件域控件只支持单文件上传，用过网盘的同志都知道，有些时候是必须要使用多文件上传的。比如网上的相册上传照片。这种需求可以由 swfupload 实现，115 网盘就是使用的这种实现。演示效果 http://demo.swfupload.org/v220/

需求和解决方案

传统的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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!