[Plugin] WEB版一次选择多个文件进行批量上传(swfupload)的解决方案
URL:http://www.cnblogs.com/chillsrc/archive/2010/02/21/1670594.html
说明：功能完全支持ie和firefox浏览器！
一般的WEB方式文件上传只能使用FileUpload控件进行一个文件一个文件的进行上传，就算是批量上传，也要把文件一个一个的添加到页面，无法如
windows程序一样，一次选择多个文件进行批量上传。这样在某些应用上就显得很不人性化，有时候客户希望能够一次选择很多文件，然后让系统把选择的文
件全部上传。
这里，就将针对这个问题提出一个比较完美的解决方案，利用的SwfUpload组件，让客户一次选择多个文件，然后将选择的文件上传到服务器上。
关于SWFUpload的一些说明：
1) SWFUpload使用一个隐藏的Flash影片来控制文件的选择和上传。
2) JavaScript用来激活文件选择对话框。此文件选择对话框是可以设置允许用户选择一个单独的文件或者是多个文件。 选择的的文件类型也是可以被限制的，因此用户只能选择指定的适当的文件，例如*.jgp;*.gif。
3) 当选定文件以后，每个文件都会被验证和处理。当Flash上传文件的时候，由开发人员预定义的Javascript事件会被定时触发以便来更新页面中的UI，同时还提供上传状态和错误信息。
4)
选定的文件的上传和它所在页面、表单是独立的。每个文件都是单独上传的，这就保证了服务端脚本能够在一个时间点更容易地处理单个文件。虽然Flash提供
了上传服务，但是页面并不会提交或者重新载入。相比于标准的HTML
Form，SWFUpload的使用方式更像是AJAX程序，页面中的Form会和FLASH控制的文件上传单独处理。
具体信息可以访问swfupload官方网站：http://www.swfupload.org/
让我们先来看看客户端的界面效果图。（多选文件，批量上传，上传进度显示）
1) 进行多文件选择：
图1
2) 上传进度显示
图2
下面进行具体的操作：
第一步，要进行下面的过程，必须先准备好Flash插件和SwfUpload组件。
1) Flash插件:相信大家的浏览器早已经安装过了，请检查版本，尽量使用最新的的flash插件。
2) SwfUpload:大家可以访问swfupload官方网站：http://www.swfupload.org/，在这个网站上可以下载到组件与demo。
第二步,创建应用的目录结构，我这个示例的目录结构如图：
1.主要目录结构
2. 文件上传用到的js脚本文件。
3. swfupload目录中的文件
第三步，前台部分准备客户操作的WEB界面，如下[TestUploadFile2.aspx、uploadFile.aspx]
1) 前台客户端代码，其中TestUploadFile2.aspx的代码如下，TestUploadFile2.aspx.cs文件中只使用默认的代码，不用添加任何代码。
TestUploadFile2.aspx
Html代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestUploadFile2.aspx.cs" Inherits="TestUploadFile2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="swfupload/swfupload.js"></script>
<script type="text/javascript" src="simpledemo/js/swfupload.queue.js"></script>
<script type="text/javascript" src="simpledemo/js/fileprogress.js"></script>
<script type="text/javascript" src="simpledemo/js/handlers.js"></script>
<script type="text/javascript">
var swfu;
window.onload = function() {
var settings = {
flash_url : "swfupload/swfupload.swf",
upload_url: "uploadFile.aspx",
post_params: {
"ASPSESSID": "<%=Session.SessionID %>"
},
file_size_limit : "100 MB",
file_types : "*.*", //这是全部文件都可以上传，如果要限制只有某些文件上传，则可以这么写 file_types : "*.jpg;*.gif;*.png",
file_types_description : "All Files",
file_upload_limit : 100,
file_queue_limit : 0,
custom_settings : {
progressTarget : "fsUploadProgress",
cancelButtonId : "btnCancel"
},
debug: false,
// Button settings
//这儿是swfupload v2新增加的功能，由于flash player 10的安全性的提高所以增加了此功能。
//在SWFUpload v2中，不能再使用html的button来触发SWFUpload，必须使用定制的Button，这其中比较要注意的是，button不能再用css控制，需要用图片来显示
button_image_url: "images/XPButtonNoText_160x22.png",
button_placeholder_id: "spanButtonPlaceHolder",
button_width: 160,
button_height: 22,
button_text: '<span class="button">
选择文件 <span class="buttonSmall">(2
MB Max)</span></span>',
button_text_style: '.button { font-family: Helvetica, Arial,
sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',
button_text_top_padding: 1,
button_text_left_padding: 5,
// The event handler functions are defined in handlers.js
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,
queue_complete_handler : queueComplete // Queue plugin event
};
swfu = new SWFUpload(settings);
};
</script>
</head>
<body>
<div id="content">
<h2>一次选择多个文件进行上传</h2>
<form id="form1" runat="Server">
<div>
<span id="spanButtonPlaceHolder"></span>
<input id="btnCancel" type="button" value="取消全部上传"
onclick="swfu.cancelQueue();" disabled="disabled" style="margin-left:
2px; font-size: 8pt; height: 22px;" />
</div>
<p> </p>
<div class="fieldset flash" id="fsUploadProgress">
<span class="legend">Upload Queue</span>
</div>
<div id="divStatus">0 个文件已经上传</div>
</form>
</div>
</body>
</html>
以上代码最后的显示结果如图:
图3.
2)后台服务器端代码：uploadFile.aspx文件中使用默认的代码，不需要添加任何代码。uploadFile.aspx.cs文件的代码如下：
uploadFile.aspx.cs
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
public partial class net_uploadFile : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Response.CacheControl = "no-cache";
string s_rpath =@"E:\WebSites\SWFUpload\demos\applicationdemo.net\"; //此处请自行修改成自己的目录
string Datedir = DateTime.Now.ToString("yy-MM-dd");
string updir = s_rpath + "\\" + Datedir;
if (this.Page.Request.Files.Count > 0)
{
try
{
for (int j = 0; j < this.Page.Request.Files.Count; j++)
{
HttpPostedFile uploadFile = this.Page.Request.Files[j];
if (uploadFile.ContentLength > 0)
{
if (!Directory.Exists(updir))
{
Directory.CreateDirectory(updir);
}
string extname = Path.GetExtension(uploadFile.FileName);
string
fullname=DateTime.Now.Year.ToString()+DateTime.Now.Month.ToString()+DateTime.Now.Day.ToString()+
DateTime.Now.Hour.ToString()+DateTime.Now.Minute.ToString()+DateTime.Now.Second.ToString();
string filename = uploadFile.FileName;
uploadFile.SaveAs(string.Format("{0}\\{1}", updir, filename));
}
}
}
catch (Exception ex)
{
Response.Write("Message"+ ex.ToString());
}
}
}
}
第四步，如果使用以上代码，在具体的应用中不能使用或是ie可行,ff不行，则需要在Global.asax文件中添加以下代码。
如果Global.asax文件不存在，则请在应用的根目录中创建。
<%@ Application Language="C#" %>
<script runat="server">
void Application_BeginRequest(object sender, EventArgs e)
{
/* Fix for the Flash Player Cookie bug in Non-IE browsers.
* Since Flash Player always sends the IE cookies even in FireFox
* we have to bypass the cookies by sending the values as part of the POST or GET
* and overwrite the cookies with the passed in values.
*
* The theory is that at this point (BeginRequest) the cookies have not been read by
* the Session and Authentication logic and if we update the cookies here we'll get our
* Session and Authentication restored correctly
*/
try
{
string session_param_name = "ASPSESSID";
string session_cookie_name = "ASP.NET_SESSIONID";
if (HttpContext.Current.Request.Form[session_param_name] != null)
{
UpdateCookie(session_cookie_name, HttpContext.Current.Request.Form[session_param_name]);
}
else if (HttpContext.Current.Request.QueryString[session_param_name] != null)
{
UpdateCookie(session_cookie_name, HttpContext.Current.Request.QueryString[session_param_name]);
}
}
catch (Exception)
{
Response.StatusCode = 500;
Response.Write("Error Initializing Session");
}
try
{
string auth_param_name = "AUTHID";
string auth_cookie_name = FormsAuthentication.FormsCookieName;
if (HttpContext.Current.Request.Form[auth_param_name] != null)
{
UpdateCookie(auth_cookie_name, HttpContext.Current.Request.Form[auth_param_name]);
}
else if (HttpContext.Current.Request.QueryString[auth_param_name] != null)
{
UpdateCookie(auth_cookie_name, HttpContext.Current.Request.QueryString[auth_param_name]);
}
}
catch (Exception)
{
Response.StatusCode = 500;
Response.Write("Error Initializing Forms Authentication");
}
}
void UpdateCookie(string cookie_name, string cookie_value)
{
HttpCookie cookie = HttpContext.Current.Request.Cookies.Get(cookie_name);
if (cookie == null)
{
cookie = new HttpCookie(cookie_name);
HttpContext.Current.Request.Cookies.Add(cookie);
}
cookie.Value = cookie_value;
HttpContext.Current.Request.Cookies.Set(cookie);
}
</script>
第五步，在进行上传之后的结果如图：
最后的关于swfupload v2版的一些说明：
void selectFile()
不赞成使用，不兼容Flash Player 10
弹出flash的文件选择对话框，只能选择单个文件。
void selectFiles()
不赞成使用，不兼容Flash Player 10
弹出flash的文件选择对话框，可一次性选择多个文件。
关于上面的demo代码。其中swfupload使用的是v2.2 。
2012-12-27补充：
看了下面的留言，发现有些问题，我把Demo下载了下去，又自己试了一下，发现在IE9中上传按钮不可见，在IE7/8中可见。
2014-04-28补充：（感谢18楼的午夜凉茶）
在swfupload.js中，找到SWFUpload.prototype.getFlashHTML
return ['<object id="', this.movieName, '"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
type="application/x-shockwave-flash" data="', this.settings.flash_url,
'" width="', this.settings.button_width, '" height="',
this.settings.button_height, '" class="swfupload">',
把" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 这个添加上去即可。我的代码已经添加上去了
我使用的VS2010。
对于以上项目进行了一些修改，在首页中添加了指向Demo页的标签。
“一次选择多个文件进行上传示例”是TestUploadFile2.aspx这个文件。
希望对大家有所帮助。
applicationdemo.net_vs2010.rar
[Plugin] WEB版一次选择多个文件进行批量上传(swfupload)的解决方案的更多相关文章
- WEB版一次选择多个文件进行批量上传(swfupload)的解决方案
说明:功能完全支持ie和firefox浏览器! 一般的WEB方式文件上传只能使用FileUpload控件进行一个文件一个文件的进行上传,就算是批量上传,也要把文件一个一个的添加到页面,无法如windo ...
- WEB版一次选择多个文件进行批量上传(Plupload)的解决方案
WEB版一次选择多个文件进行批量上传(Plupload)的解决方案 转载自http://www.cnblogs.com/chillsrc/archive/2013/01/30/2883648.htm ...
- WEB版一次选择多个文件进行批量上传(WebUploader)的解决方案
本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...
- WEB版一次选择多个图片进行批量上传(WebUploader)的解决方案
最近在学习百度的开源上传组件WebUploader,上一篇文章,学习了批量文件上传,今天学习一下批量图片上传,实际上与文件上传很类似,只是添加了图片显示功能,这个功能WebUploader组件中已经提 ...
- 使用KindEditor富文本编辑器，点击批量上传按钮没有选择图片按钮
问题:批量上传没有选择图片按钮
- 利用WebUploader进行图片批量上传，在页面显示后选择多张图片压缩至指定路径【java】
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览 ...
- Microsoft Dynamics CRM 批量上传web资源（非官方WebResourceUtility）并替换实体图标
背景: 去年以前可以按照目录WebResourceUtility批量上传web资源,昨天发现用不了了,拿到WebResourceUtility源码改了一下都不是很方便,感觉官方写的太冗余,太长了,跟我 ...
- web自动化测试难点 滚动条操作、日期框处理、上传文件
如何把页面滑到最低部? 一般来说,做web自动化测试时,不需要单独写代码,把页面滑到可见,因为click操作,只要是元素存在并且加载出来了,就可以点击到,无需另外写滑动元素的代码. 如果特殊情况需要滑 ...
- ueditor1.3.6jsp版在struts2应用中上传图片报"未找到上传文件"解决方案
摘要: ueditor1.3.6jsp版在struts2应用中上传图片报"未找到上传文件"解决方案 在struts2应用中使用ueditor富文本编辑器上传图片或者附件时,即使配置 ...
随机推荐
- 时序分析：ARIMA模型（非平稳时间序列）
转载于一篇硕士论文.... ARIMA模型意为求和自回归滑动平均模型(IntergratedAut少regressive MovingAverageModel),简记为ARIMA(p,d,q),p,q ...
- fiddler抓包 IOS11以上系统
想要使用fiddler对iphone X进行抓包,按照以前的配置方法,走一遍.还是抓不成,原来是因为IOS11操作系统中,安装完证书之后,还需要再手动信任证书才能正常抓包. 以下内容来自:https: ...
- 关于图片和auido预加载
预加载老生常谈: funtion preLoadImages(imageArr){ var self = this; var newimages=[], loadedimages=0 var post ...
- java HttpURLConnection 登录网站 完整代码
import java.io.*; import java.util.*; import java.net.*; public class WebTest { public static void m ...
- MySQL NULL 值如何处理？
我们已经知道 MySQL 使用 SQL SELECT 命令及 WHERE 子句来读取数据表中的数据,但是当提供的查询条件字段为 NULL 时,该命令可能就无法正常工作. 为了处理这种情况,MySQL提 ...
- Pytorch实战（3）----分类
一.分类任务: 将以下两类分开. 创建数据代码: # make fake data n_data = torch.ones(100, 2) x0 = torch.normal(2*n_data, 1) ...
- 【剑指Offer】57、二叉树的下一个结点
题目描述: 给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回.注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针. 解题思路: 本题解决起来并不是很困难 ...
- 洛谷 P1640 BZOJ 1854 [SCOI2010]连续攻击游戏
题目描述 lxhgww最近迷上了一款游戏,在游戏里,他拥有很多的装备,每种装备都有2个属性,这些属性的值用[1,10000]之间的数表示.当他使用某种装备时,他只能使用该装备的某一个属性.并且每种装备 ...
- 洛谷 P1131 BZOJ 1060 [ZJOI2007]时态同步
题目描述 小Q在电子工艺实习课上学习焊接电路板.一块电路板由若干个元件组成,我们不妨称之为节点,并将其用数字1,2,3….进行标号.电路板的各个节点由若干不相交的导线相连接,且对于电路板的任何两个节点 ...
- [bzoj1212][HNOI2004]L语言_AC自动机_动态规划
L语言 bzoj-1212 HNOI-2004 题目大意:给你一个n个单词的集合,然后给你m条字符串.问每条字符串可以被理解的最长前缀.被理解当且仅当存在一种分割使得每一段都是集合里的元素. 注释:$ ...