利用SWFupload实现表单上传大文件

首先,先介绍一个swfUplod吧.

SWFUpload是一个客户端文件上传工具，最初由Vinterwebb.se开发，它通过整合flash与javascript技术为web开发者提供了一个具有丰富功能继而超越传统<input type="file" />标签的文件上传模式。



一从大体上来说,swfUpload主要有这样几个重要的文件

1.swfupload_f9.swf. 这个是核心的上传用的flash文件.

2.upload.aspx 这个是把文件上传到服务器上后,所要处理的页面.

3.default.css 用于显示进度条的CSS文件.可以根据自己喜好进行修改!

4.swfupload.js 定义了swfupload_f9组建的属性和一些方法.(最好不好动).

5.handler.js 定义了,用于处理swfupload_f9组建所触发的事件.可以根据自己需要,进行修改.

可以说,swfUpload利用这样5个文件就能做到自己任何想要的上传功能.......(我只是说可能....呵呵)

二.介绍各个文件

1.swfupload_f9.swf的用法:

//初始化一个上传的flash对象.

var swfu;

var uploadpage="upload.aspx";

var afterLoadPage="afterUpload.aspx";

//在窗体加载事件里初始化

window.onload = function () {

var progressTd=document.getElementById('progressTd');

progressTd.style.display="none";

swfu = new SWFUpload({

// Backend Settings

upload_url: uploadpage, // Relative to the SWF file

post_params : {

"ASPSESSID" : "<%=Session.SessionID %>"

},

// File Upload Settings

file_size_limit : "1900000", //最大2G,这里是1.9G左右大小.

file_types : "*", //设置选择文件的类型

file_types_description : "all extention type!",//这里是描述文件类型

file_upload_limit : "0", //0代表不受上传个数的限制

//以下为处理的事件

file_queued_handler : fileQueued, //选择过文件后,把文件放入队列后,所触发的事件

file_dialog_complete_handler : fileDialogComplete,//这个上面的查不多,当关闭选择框后,做触发的事件.

upload_progress_handler : uploadProgress,//处理上传进度

upload_error_handler : uploadError,//错误处理事件

upload_success_handler : uploadSuccess,//上传成功够,所处理的时间

upload_complete_handler : uploadComplete,//上传结束后,处理的事件

//flash的位置.

flash_url : "swfupload_f9.swf", // 相对路径

custom_settings : {

upload_target : "divFileProgressContainer"

},

// Debug Settings

debug: false

});

}

swfu常用的方法有5个,分别为:

1>swfu.selectFile();

一次选择单个文件.

2>swfu.selectFiles();

一次选择多个文件.

3>swfu.startUpload();

开始上传文件

4>swfu.cancelUpload("SWFUpload_0_0");

取消正在上传，或将要上传的文件。SWFUpload_0_0表示第一个文件，SWFUpload_0_1表示第二个文件。。。。一直往后推。

5>swfu.stopUpload()

停止文件的上传。

这5个方法都是比较常用的，大家要记者。

2.常用到的事件，自定义。（大家可以根据自己的需要，进行修改这些方法，其实就是一些普通的javascript 方法。）

[align=left]//1。当加载了文件后,触发的事件.这里,是让他的名字赋予txtbox[/align]
[align=left]function fileQueued(file)[/align]
[align=left]{[/align]
[align=left] try {[/align]
[align=left] var txtFileName = document.getElementById("txtFileName");[/align]
[align=left] txtFileName.value = file.name;[/align]
[align=left] }[/align]
[align=left] catch (e)[/align]
[align=left] {[/align]
[align=left] }[/align]
[align=left] [/align]
[align=left]}[/align]
[align=left] [/align]
[align=left]//2。上传进度设置事件[/align]
[align=left]function uploadProgress(file, bytesLoaded) {[/align]
[align=left] [/align]
[align=left] try {[/align]
[align=left] var percent = Math.ceil((bytesLoaded / file.size) * 100);[/align]
[align=left] [/align]
[align=left] var progress = new FileProgress(file, this.customSettings.upload_target);[/align]
[align=left] progress.setProgress(percent);[/align]
[align=left] if (percent === 100) {[/align]
[align=left] progress.setStatus("上传完毕,正在释放内存,请锁定鼠标,不要乱动,正在保存......");[/align]
[align=left] progress.toggleCancel(false, this);[/align]
[align=left] [/align]
[align=left] //跳转到上传成功网页[/align]
[align=left] refresh();[/align]
[align=left][/align]
[align=left] }[/align]
[align=left] //显示上传信息[/align]
[align=left] else {[/align]
[align=left] progress.setStatus("上传中,请梢后......‖已上传："+(bytesLoaded/(1024*1024))+"/"+file.size+" 『"+percent+"%』");[/align]
[align=left] progress.toggleCancel(true, this);[/align]
[align=left] }[/align]
[align=left] } catch (ex) {[/align]
[align=left] this.debug(ex);[/align]
[align=left] }[/align]
[align=left]}[/align]
[align=left] [/align]
[align=left] //3。上传一个文件成功后，所触发的事件。[/align]
[align=left]function uploadComplete(file) {[/align]
[align=left] try {[/align]
[align=left] //若有多个文件，则上传一个成功后，继续上传，否则显示上传成功！[/align]
[align=left] if (this.getStats().files_queued > 0) {[/align]
[align=left] this.startUpload();[/align]
[align=left] } else {[/align]
[align=left] var progress = new FileProgress(file, this.customSettings.upload_target);[/align]
[align=left] progress.setComplete();[/align]
[align=left] progress.setStatus("所有文件都上传成功！.");[/align]
[align=left] progress.toggleCancel(false);[/align]
[align=left] }[/align]
[align=left] } catch (ex) {[/align]
[align=left] this.debug(ex);[/align]
[align=left] }[/align]
[align=left]}[/align]
[align=left]//4。删除刚才选择的上传文件[/align]
[align=left]function uploadCancel()[/align]
[align=left]{[/align]
[align=left] swfu.cancelUpload("SWFUpload_0_0");[/align]
[align=left]}[/align]
[align=left] [/align]
[align=left]//5。当选择框被关闭后,所触发的事件.这里,我还没有用.以后真对需要,可以填写在里面[/align]
[align=left]function fileDialogComplete(numFilesSelected, numFilesQueued)[/align]
[align=left] { [/align]
[align=left]}[/align]
[align=left] [/align]
[align=left]//6。错误事件处理。[/align]
[align=left]function uploadError(file, errorCode, message) {[/align]
[align=left] var imageName = "error.gif";[/align]
[align=left] var progress;[/align]
[align=left] try {[/align]
[align=left] switch (errorCode) {[/align]
[align=left] case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:[/align]
[align=left] try {[/align]
[align=left] return;[/align]
[align=left] progress = new FileProgress(file, this.customSettings.upload_target);[/align]
[align=left] progress.setCancelled();[/align]
[align=left] progress.setStatus("已取消！");[/align]
[align=left] progress.toggleCancel(false);[/align]
[align=left] }[/align]
[align=left] catch (ex1) {[/align]
[align=left] this.debug(ex1);[/align]
[align=left] }[/align]
[align=left] break;[/align]
[align=left] case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:[/align]
[align=left] try {[/align]
[align=left] progress = new FileProgress(file, this.customSettings.upload_target);[/align]
[align=left] progress.setCancelled();[/align]
[align=left] progress.setStatus("Stopped");[/align]
[align=left] progress.toggleCancel(true);[/align]
[align=left] }[/align]
[align=left] catch (ex2) {[/align]
[align=left] this.debug(ex2);[/align]
[align=left] }[/align]
[align=left] case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:[/align]
[align=left] imageName = "uploadlimit.gif";[/align]
[align=left] break;[/align]
[align=left] default:[/align]
[align=left] alert(message);[/align]
[align=left] break;[/align]
[align=left] }[/align]
[align=left] [/align]
[align=left] addImage("images/" + imageName);[/align]
[align=left] [/align]
[align=left] } catch (ex3) {[/align]
[align=left] this.debug(ex3);[/align]
[align=left] }[/align]
[align=left] [/align]
[align=left]}[/align]

大家可以把这些文件保存到一个.js文件里，在要上传的页面里引用此js文件，就可以了！

3.upload.aspx文件。
这个文件是把文件以MIME的形式读取到服务器上后，所触发的。是一个隐藏的页面。大家把自己想要进行的后续操作，都写在这个页面的page_load事件里。比如说：保存文件到C：/，并把此文件的附加信息保存到数据库里。

upload.aspx.cs

[align=left]using System;[/align]
[align=left]using System.Data;[/align]
[align=left]using System.Configuration;[/align]
[align=left]using System.Collections;[/align]
[align=left]using System.Web;[/align]
[align=left]using System.Web.Security;[/align]
[align=left]using System.Web.UI;[/align]
[align=left]using System.Web.UI.WebControls;[/align]
[align=left]using System.Web.UI.WebControls.WebParts;[/align]
[align=left]using System.Web.UI.HtmlControls;[/align]
[align=left]using System.IO;[/align]
[align=left]using System.Collections.Generic;[/align]
[align=left] [/align]
public partial class upload :
System.Web.UI.Page
[align=left]{[/align]
[align=left] protected void Page_Load(object sender, EventArgs e)[/align]
[align=left] {[/align]
[align=left] [/align]
[align=left] try[/align]
[align=left] {[/align]
[align=left] [/align]
[align=left] // 获取从MIME中读取出来的文件[/align]
[align=left] HttpPostedFile postedFile = Request.Files["Filedata"];[/align]
[align=left] [/align]
[align=left] //获得文件存放路径[/align]
[align=left] string serverFilePath = "";[/align]
[align=left] [/align]
[align=left] string fileExtention = postedFile.FileName.Substring(postedFile.FileName.LastIndexOf("."));[/align]
[align=left] //获取文件大小[/align]
[align=left] double size = (double)(postedFile.ContentLength) / (1024 * 1024);[/align]
[align=left] [/align]
[align=left] //判断是哪种类型的上传[/align]
[align=left] string oper = Request.QueryString["oper"].ToString();[/align]
[align=left] //1.若是文档上传[/align]
[align=left] switch (oper)[/align]
[align=left] {[/align]
[align=left] case "fileUpload":[/align]
[align=left] {[/align]
[align=left] [/align]
[align=left] //获取文档的保存路径[/align]
[align=left] serverFilePath = sourceCenter.getSourcePathByArgs("文档");[/align]
[align=left] //获取传过来的参数[/align]
[align=left] string fileName = Request.QueryString["fileName"].ToString();//文件名[/align]
[align=left] string fileAuthor = Request.QueryString["fileAuthor"].ToString();//文件的作者[/align]
[align=left] string fileSource = Request.QueryString["fileSource"].ToString();//文件来源[/align]
[align=left] string fileClass = Request.QueryString["fileClass"].ToString();//文件类型[/align]
[align=left] string[] fileClassInfo = fileClass.Split("~".ToCharArray());[/align]
[align=left] string fileType = Request.QueryString["fileType"].ToString();//文件的后缀名[/align]
[align=left] string keyWords = Request.QueryString["keyWords"].ToString();//关键字[/align]
[align=left] string fileContent = Request.QueryString["fileContent"].ToString();//文件的简介[/align]
[align=left] string filePubDate = Request.QueryString["filePubDate"].ToString();//文件的发表日期[/align]
[align=left] [/align]
[align=left] //3.插入主表[/align]
int sourceId = sourceCenter.insertMainInfo(fileName, "文档",
fileContent, serverFilePath, size.ToString("f2"), 0, "1", "徐辉", DateTime.Now,
fileExtention);
[align=left] //4.插入文档表[/align]
[align=left] if (filePubDate != "null")[/align]
[align=left] filePubDate=Convert.ToDateTime(filePubDate).ToShortDateString();[/align]
[align=left] sourceCenter.insertFileInfo(sourceId, fileClassInfo[0], fileAuthor, filePubDate, fileSource, keyWords, fileType);[/align]
[align=left] [/align]
[align=left] DirectoryInfo dirInfo = new DirectoryInfo(serverFilePath);[/align]
[align=left] //若路径不存在,则创建[/align]
[align=left] if (!dirInfo.Exists)[/align]
[align=left] dirInfo.Create();[/align]
[align=left] [/align]
[align=left] //连接文件保存的绝对路径[/align]
[align=left] serverFilePath += sourceId.ToString() + "~" + fileName;[/align]
[align=left] [/align]
[align=left] break;[/align]
[align=left] }[/align]
[align=left] case "softUpload":[/align]
[align=left] {[/align]
[align=left] //1.获取软件的保存路径[/align]
[align=left] serverFilePath = sourceCenter.getSourcePathByArgs("软件");[/align]
[align=left] //2.获取传过来的参数[/align]
[align=left] string softName = Request.QueryString["softName"].ToString();[/align]
[align=left] string softClass = Request.QueryString["softClass"].ToString();[/align]
[align=left] string platform = Request.QueryString["platform"].ToString();[/align]
[align=left] string softRight = Request.QueryString["softRight"].ToString();[/align]
[align=left] string language = Request.QueryString["language"].ToString();[/align]
[align=left] string developCompany = Request.QueryString["developCompany"].ToString();[/align]
[align=left] string softContent = Request.QueryString["softContent"].ToString();[/align]
[align=left] [/align]
[align=left] //3.插入主表[/align]
int sourceId=sourceCenter.insertMainInfo(softName, "软件",
softContent, serverFilePath, size.ToString("f2"), 0, "1", "徐辉", DateTime.Now,
fileExtention);
[align=left] [/align]
[align=left] //4.插入文档表[/align]
[align=left] sourceCenter.insertSoftInfo(sourceId, softClass, platform, softRight, language, developCompany);[/align]
[align=left] [/align]
[align=left] DirectoryInfo dirInfo = new DirectoryInfo(serverFilePath);[/align]
[align=left] //若路径不存在,则创建[/align]
[align=left] if (!dirInfo.Exists)[/align]
[align=left] dirInfo.Create();[/align]
[align=left] [/align]
[align=left] //5.连接文件保存的绝对路径[/align]
[align=left] serverFilePath += sourceId.ToString() + "~" + softName;[/align]
[align=left] break;[/align]
[align=left] }[/align]
[align=left] case "mediaUpload":[/align]
[align=left] {[/align]
[align=left] [/align]
[align=left] //1.获取软件的保存路径[/align]
[align=left] serverFilePath = sourceCenter.getSourcePathByArgs("媒体");[/align]
[align=left] //2.获取传过来的参数[/align]
[align=left] string mediaName = Request.QueryString["mediaName"].ToString();[/align]
[align=left] string mediaLanguage = Request.QueryString["mediaLanguage"].ToString();[/align]
[align=left] string actor = Request.QueryString["actor"].ToString();[/align]
[align=left] string mediaExtention = Request.QueryString["mediaExtention"].ToString();[/align]
[align=left] string mediaKind = Request.QueryString["mediaKind"].ToString();[/align]
[align=left] string mediaClass = Request.QueryString["mediaClass"].ToString();[/align]
[align=left] string mediaPubDate = Request.QueryString["mediaPubDate"].ToString();[/align]
[align=left] string mediaContent = Request.QueryString["mediaContent"].ToString();[/align]
[align=left] [/align]
[align=left] //3.插入主表[/align]
int sourceId=sourceCenter.insertMainInfo(mediaName, "媒体",
mediaContent, serverFilePath, size.ToString("f2"), 0, "1", "徐辉", DateTime.Now,
fileExtention);
[align=left] [/align]
[align=left] //4.插入文档表 [/align]
[align=left] sourceCenter.insertMediaInfo(sourceId, mediaClass, mediaKind, mediaLanguage, actor, mediaPubDate, mediaExtention);[/align]
[align=left] DirectoryInfo dirInfo = new DirectoryInfo(serverFilePath);[/align]
[align=left] //若路径不存在,则创建[/align]
[align=left] if (!dirInfo.Exists)[/align]
[align=left] dirInfo.Create();[/align]
[align=left] [/align]
[align=left] //5.连接文件保存的绝对路径[/align]
[align=left] serverFilePath += sourceId.ToString() + "~" + mediaName;[/align]
[align=left] [/align]
[align=left] [/align]
[align=left] [/align]
[align=left] break;[/align]
[align=left] }[/align]
[align=left] case "imageUpload":[/align]
[align=left] {[/align]
[align=left] [/align]
[align=left] break;[/align]
[align=left] }[/align]
[align=left] default:[/align]
[align=left] {[/align]
[align=left] break;[/align]
[align=left] }[/align]
[align=left] }[/align]
[align=left] [/align]
[align=left] //保存上传上来的文件[/align]
[align=left] postedFile.SaveAs(@serverFilePath+fileExtention);[/align]
[align=left] }[/align]
[align=left] catch[/align]
[align=left] {[/align]
[align=left] //若保存时发生错误。[/align]
[align=left] Response.StatusCode = 500;[/align]
[align=left] Response.Write("文档上传时，发生错误！");[/align]
[align=left] Response.End();[/align]
[align=left] }[/align]
[align=left] finally[/align]
[align=left] { [/align]
[align=left] Response.End();[/align]
[align=left] }[/align]
[align=left] [/align]
[align=left] }[/align]
[align=left]}[/align]

三、总结：
1。上传主界面，初始化一个swfu对象
2。根据handle.js，抽取自己需要的方法，重写，并保存为自己的js文件。
3。新建一个upload.aspx文件，把一些后续操作放在page_load事件里。
4。打完收工！休息，睡觉！哈哈！

好了，大家现在明白了，怎么做自己的文件上传了吗？呵呵！虽然没什么技术含量，大家不要骂我。要不，我会伤心的，呵呵！