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

时间:2021-08-25 04:19:03

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

利用SWFupload实现表单上传大文件
一从大体上来说,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 方法。)
 
 
//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(falsethis);
             
              //跳转到上传成功网页
              refresh();
         }
        //显示上传信息
        else {
              progress.setStatus("上传中,请梢后......‖已上传:"+(bytesLoaded/(1024*1024))+"/"+file.size+『"+percent+"%』");
              progress.toggleCancel(truethis);
         }
     } 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"), 0, "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, serverFilePath, size.ToString("f2"), 0, "1""徐辉"DateTime.Now, 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, serverFilePath, size.ToString("f2"), 0, "1""徐辉"DateTime.Now, 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。打完收工!休息,睡觉!哈哈!
 
好了,大家现在明白了,怎么做自己的文件上传了吗?呵呵!虽然没什么技术含量,大家不要骂我。要不,我会伤心的,呵呵!