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

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

导读：首先,先介绍一个swfUplod吧. SWFUpload是一个客户端文件上传工具，最初由Vinterwebb.se开发，它通过整合flash与javascript技术为web开发者提供了一个具有丰富功能继而超越传统input type="file" /标签的文件上传模式。一从大体上来说,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"

????????????? },51); font-family:Arial; font-size:14px; line-height:26px"> ??????????????// 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 方法。）

//1。当加载了文件后,触发的事件.这里,是让他的名字赋予txtbox

function?fileQueued(file)

{

?????try?{

?????????var?txtFileName = document.getElementById("txtFileName");

???????? txtFileName.value = file.name;

???? ??? }

?????catch?(e)

???? ??? {

???? ??? }

}

//2。上传进度设置事件

function?uploadProgress(file,bytesLoaded) {

?????try?{

?????????var?percent = Math.ceil((bytesLoaded / file.size) * 100);

?????????var?progress =?new?FileProgress(file,?this.customSettings.upload_target);

???????? progress.setProgress(percent);

?????????if?(percent === 100) {

????????????? progress.setStatus("上传完毕,正在释放内存,请锁定鼠标,不要乱动,正在保存......");

????????????? progress.toggleCancel(false,?this);

?????????????

??????????????//跳转到上传成功网页

????????????? refresh();

???????? }

????????//显示上传信息

????????else?{

????????????? progress.setStatus("上传中,请梢后......‖已上传："+(bytesLoaded/(1024*1024))+"/"+file.size+"?『"+percent+"%』");

????????????? progress.toggleCancel(true,?this);

???????? }

???? }?catch?(ex) {

?????????this.debug(ex);

???? }

}

?//3。上传一个文件成功后，所触发的事件。

function?uploadComplete(file) {

?????try?{

?????????//若有多个文件，则上传一个成功后，继续上传，否则显示上传成功！

?????????if?(this.getStats().files_queued > 0) {

??????????????this.startUpload();

???????? }?else?{

??????????????var?progress =?new?FileProgress(file,?this.customSettings.upload_target);

????????????? progress.setComplete();

????????????? progress.setStatus("所有文件都上传成功！.");

????????????? progress.toggleCancel(false);

???????? }

???? }?catch?(ex) {

?????????this.debug(ex);

???? }

}

//4。删除刚才选择的上传文件

function?uploadCancel()

{

??? swfu.cancelUpload("SWFUpload_0_0");

}

//5。当选择框被关闭后,所触发的事件.这里,我还没有用.以后真对需要,可以填写在里面

function?fileDialogComplete(numFilesSelected,numFilesQueued)

?{??

}

//6。错误事件处理。

function?uploadError(file,errorCode,message) {

?????var?imageName =?"error.gif";

?????var?progress;

?????try?{

?????????switch?(errorCode) {

?????????case?SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:

??????????????try?{

????????????? ????return;

?????????????????? progress =?new?FileProgress(file,?this.customSettings.upload_target);

?????????????????? progress.setCancelled();

?????????????????? progress.setStatus("已取消！");

?????????????????? progress.toggleCancel(false);

????????????? }

??????????????catch?(ex1) {

???????????????????this.debug(ex1);

????????????? }

??????????????break;

?????????case?SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:

??????????????try?{

?????????????????? progress =?new?FileProgress(file,?this.customSettings.upload_target);

?????????????????? progress.setCancelled();

?????????????????? progress.setStatus("Stopped");

?????????????????? progress.toggleCancel(true);

????????????? }

??????????????catch?(ex2) {

???????????????????this.debug(ex2);

????????????? }

?????????case?SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:

????????????? imageName =?"uploadlimit.gif";

??????????????break;

?????????default:

????????????? alert(message);

??????????????break;

???????? }

???????? addImage("images/"?+ imageName);

???? }?catch?(ex3) {

?????????this.debug(ex3);

???? }

}

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

3.upload.aspx文件。

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

upload.aspx.cs

using?System;

using?System.Data;

using?System.Configuration;

using?System.Collections;

using?System.Web;

using?System.Web.Security;

using?System.Web.UI;

using?System.Web.UI.WebControls;

using?System.Web.UI.WebControls.WebParts;

using?System.Web.UI.HtmlControls;

using?System.IO;

using?System.Collections.Generic;

public?partial?class?upload?: System.Web.UI.Page

{

????protected?void?Page_Load(object?sender,?EventArgs?e)

??? {

???????

????????try

??????? {

???????????

????????????//?获取从MIME中读取出来的文件

????????????HttpPostedFile?postedFile = Request.Files["Filedata"];

????????????//获得文件存放路径

????????????string?serverFilePath =?"";

????????????string?fileExtention = postedFile.FileName.Substring(postedFile.FileName.LastIndexOf("."));

????????????//获取文件大小

????????????double?size = (double)(postedFile.ContentLength) / (1024 * 1024);

????????????//判断是哪种类型的上传

????????????string?oper = Request.QueryString["oper"].ToString();

????????????//1.若是文档上传

????????????switch?(oper)

??????????? {

???????????????case?"fileUpload":

??????????????????? {

????????????????????????//获取文档的保存路径

??????????????????????? serverFilePath =?sourceCenter.getSourcePathByArgs("文档");

????????????????????????//获取传过来的参数

????????????????????????string?fileName = Request.QueryString["fileName"].ToString();//文件名

????????????????????????string?fileAuthor = Request.QueryString["fileAuthor"].ToString();//文件的作者

????????????????????????string?fileSource = Request.QueryString["fileSource"].ToString();//文件来源

????????????????????????string?fileClass = Request.QueryString["fileClass"].ToString();//文件类型

????????????????????????string[] fileClassInfo = fileClass.Split("~".ToCharArray());

????????????????????????string?fileType = Request.QueryString["fileType"].ToString();//文件的后缀名

????????????????????????string?keyWords = Request.QueryString["keyWords"].ToString();//关键字

????????????????????????string?fileContent = Request.QueryString["fileContent"].ToString();//文件的简介

????????????????????????string?filePubDate = Request.QueryString["filePubDate"].ToString();//文件的发表日期

????????????????????????//3.插入主表

????????????????????????int?sourceId =?sourceCenter.insertMainInfo(fileName,?"文档",fileContent,serverFilePath,size.ToString("f2"),?"1",?"徐辉",?DateTime.Now,fileExtention);

????????????????????????//4.插入文档表

????????????????????????if?(filePubDate !=?"null")

??????????????????????????? filePubDate=Convert.ToDateTime(filePubDate).ToShortDateString();

????????????????????????sourceCenter.insertFileInfo(sourceId,fileClassInfo[0],fileAuthor,filePubDate,fileSource,keyWords,fileType);

????????????????????????DirectoryInfo?dirInfo =?new?DirectoryInfo(serverFilePath);

????????????????????????//若路径不存在,则创建

????????????????????????if?(!dirInfo.Exists)

??????????????????????????? dirInfo.Create();

????????????????????????//连接文件保存的绝对路径

??????????????????????? serverFilePath += sourceId.ToString() +?"~"?+ fileName;

????????????????????????break;

??????????????????? }

????????????????case?"softUpload":

???????????????????{

????????????????????????//1.获取软件的保存路径

??????????????????????? serverFilePath =?sourceCenter.getSourcePathByArgs("软件");

????????????????????????//2.获取传过来的参数

????????????????????????string?softName = Request.QueryString["softName"].ToString();

????????????????????????string?softClass = Request.QueryString["softClass"].ToString();

????????????????????????string?platform = Request.QueryString["platform"].ToString();

????????????????????????string?softRight = Request.QueryString["softRight"].ToString();

????????????????????????string?language = Request.QueryString["language"].ToString();

????????????????????????string?developCompany = Request.QueryString["developCompany"].ToString();

????????????????????????string?softContent = Request.QueryString["softContent"].ToString();

????????????????????????//3.插入主表

????????????????????????int?sourceId=sourceCenter.insertMainInfo(softName,?"软件",softContent,fileExtention);

????????????????????????//4.插入文档表

????????????????????????sourceCenter.insertSoftInfo(sourceId,softClass,platform,softRight,language,developCompany);

????????????????????????DirectoryInfo?dirInfo =?new?DirectoryInfo(serverFilePath);

???????????????? ???????//若路径不存在,则创建

????????????????????????if?(!dirInfo.Exists)

??????????????????????????? dirInfo.Create();

????????????????????????//5.连接文件保存的绝对路径

??????????????????????? serverFilePath += sourceId.ToString() +?"~"?+ softName;

????????????????????????break;

??????????????????? }

????????????????case?"mediaUpload":

??????????????????? {

????????????????????????//1.获取软件的保存路径

??????????????????????? serverFilePath =?sourceCenter.getSourcePathByArgs("媒体");

????????????????????????//2.获取传过来的参数

????????????????????????string?mediaName = Request.QueryString["mediaName"].ToString();

????????????????????????string?mediaLanguage = Request.QueryString["mediaLanguage"].ToString();

????????????????????????string?actor = Request.QueryString["actor"].ToString();

????????????????????????string?mediaExtention = Request.QueryString["mediaExtention"].ToString();

????????????????????????string?mediaKind = Request.QueryString["mediaKind"].ToString();

????????????????????????string?mediaClass = Request.QueryString["mediaClass"].ToString();

????????????????????????string?mediaPubDate = Request.QueryString["mediaPubDate"].ToString();

????????????????????????string?mediaContent = Request.QueryString["mediaContent"].ToString();

?????? ?????????????????//3.插入主表

????????????????????????int?sourceId=sourceCenter.insertMainInfo(mediaName,?"媒体",mediaContent,fileExtention);

????????????????????????//4.插入文档表?

????????????????????????sourceCenter.insertMediaInfo(sourceId,mediaClass,mediaKind,mediaLanguage,actor,mediaPubDate,mediaExtention);

????????????????????????DirectoryInfo?dirInfo =?new?DirectoryInfo(serverFilePath);

????????????????????????//若路径不存在,则创建

????????????????????????if?(!dirInfo.Exists)

??????????????????????????? dirInfo.Create();

????????????????????????//5.连接文件保存的绝对路径

??????????????????????? serverFilePath += sourceId.ToString() +?"~"?+ mediaName;

???????????????????????

????????????????????????break;

??????????????????? }

????????????????case?"imageUpload":

??????????????????? {

????????????????????????break;

??????????????????? }

????????????????default:

??????????????????? {

????????????????????????break;

??????????????????? }

??????????? }

????????????//保存上传上来的文件

??????????? postedFile.SaveAs(@serverFilePath+fileExtention);

??????? }

????????catch

??????? {

????????????//若保存时发生错误。

??????????? Response.StatusCode = 500;

??????????? Response.Write("文档上传时，发生错误！");

??????????? Response.End();

??????? }

?????????finally

???????? {????????????

????????????? Response.End();

???????? }

????

???? }

}

三、总结：

1。上传主界面，初始化一个swfu对象

2。根据handle.js，抽取自己需要的方法，重写，并保存为自己的js文件。

3。新建一个upload.aspx文件，把一些后续操作放在page_load事件里。

4。打完收工！休息，睡觉！哈哈！

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

（编辑：李大同）

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