需求和解决方案
传统的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>
这个文件的重点是:
2.swfupload对象的初始化,这些js语句配置了一个swfupload对象,理解配置是一个重点。
使用swfupload实现多文件上传的思路是在客户端通过选众多个文件,生成一个文件上传队列,这个队列中的每一个文件就相当于一个传统的文件域。所以在服务器端是没有任何变化的。
完整项目下载
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。