|
需求和解决方案
传统的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
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
