首先,先介绍一个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 方法。)

//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文件,就可以了!

三、总结:

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

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

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

4。打完收工!休息,睡觉!哈哈!

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

转自:http://www.cnblogs.com/doublemm/archive/2011/08/19/2145634.html(支持原创)

swfupload浅谈的更多相关文章

  1. 浅谈 Fragment 生命周期

    版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...

  2. 浅谈 LayoutInflater

    浅谈 LayoutInflater 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/View 文中如有纰漏,欢迎大家留言指出. 在 Android 的 ...

  3. 浅谈Java的throw与throws

    转载:http://blog.csdn.net/luoweifu/article/details/10721543 我进行了一些加工,不是本人原创但比原博主要更完善~ 浅谈Java异常 以前虽然知道一 ...

  4. 浅谈SQL注入风险 - 一个Login拿下Server

    前两天,带着学生们学习了简单的ASP.NET MVC,通过ADO.NET方式连接数据库,实现增删改查. 可能有一部分学生提前预习过,在我写登录SQL的时候,他们鄙视我说:“老师你这SQL有注入,随便都 ...

  5. 浅谈WebService的版本兼容性设计

    在现在大型的项目或者软件开发中,一般都会有很多种终端, PC端比如Winform.WebForm,移动端,比如各种Native客户端(iOS, Android, WP),Html5等,我们要满足以上所 ...

  6. 浅谈angular2+ionic2

    浅谈angular2+ionic2   前言: 不要用angular的语法去写angular2,有人说二者就像Java和JavaScript的区别.   1. 项目所用:angular2+ionic2 ...

  7. iOS开发之浅谈MVVM的架构设计与团队协作

    今天写这篇博客是想达到抛砖引玉的作用,想与大家交流一下思想,相互学习,博文中有不足之处还望大家批评指正.本篇博客的内容沿袭以往博客的风格,也是以干货为主,偶尔扯扯咸蛋(哈哈~不好好工作又开始发表博客啦 ...

  8. Linux特殊符号浅谈

    Linux特殊字符浅谈 我们经常跟键盘上面那些特殊符号比如(?.!.~...)打交道,其实在Linux有其独特的含义,大致可以分为三类:Linux特殊符号.通配符.正则表达式. Linux特殊符号又可 ...

  9. 浅谈Angular的 $q, defer, promise

    浅谈Angular的 $q, defer, promise 时间 2016-01-13 00:28:00  博客园-原创精华区 原文  http://www.cnblogs.com/big-snow/ ...

随机推荐

  1. 欧拉工程第53题:Combinatoric selections

    package projecteuler51to60; class p53{ void solve1(){ int count=0; int Max=1000000; int[][] table=ne ...

  2. Gravitational Teleport 是一个先进的 SSH 服务器,基于 Golang SSH 构建,完全兼容 OpenSSH

    Gravitational Teleport 是一个先进的 SSH 服务器,可通过 SSH 或者 HTTPS 远程访问 Linux 服务器.其目的是为了替代 sshd.Teleport 可以轻松让团队 ...

  3. 在AE中通过SDE添加图层(转)

    public void AddSDELayer(bool ChkSdeLinkModle)        {            //< span style="color: #00 ...

  4. Phalanx--hdu2859(dp 最大对称子图)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2859 题意就是给你一个n*n的字符矩阵,从中选出一个最大的子矩阵(m*m)满足关于斜对角线(左下角到右 ...

  5. 305. Number of Islands II

    题目: A 2d grid map of m rows and n columns is initially filled with water. We may perform an addLand  ...

  6. sql语句的基本操作

    建立一个数据库 create DATABASE mydatabase; 建立一张数据表: ##创建一个员工表##create table employee( eid int not NULL PRIM ...

  7. C# 文件递归

    C#   文件递归 Directory.GetDirectories: 获取指定目录下的文件夹,不包括子目录: Directory.GetFiles:获取指定文件夹下的文件,不包括子目录: 1.获取所 ...

  8. YTU 2611: A代码完善--向量的运算

    2611: A代码完善--向量的运算 时间限制: 1 Sec  内存限制: 128 MB 提交: 256  解决: 168 题目描述 注:本题只需要提交填写部分的代码,请按照C++方式提交. 对于二维 ...

  9. check if a linux process is done using bash 检查进程是否在运行

    # cat > check_process_is_end.sh while truedo   sleep 30 # seconds   res=`ps -ef | grep RNAhybrid` ...

  10. hibernate学习笔记4---HQL、通用方法的抽取实现

    一.通用方法的抽取实现 由于hibernate中对增删改查的一切操作都是面向对象的,所以将增删改查抽取成通用方法,以满足不同的表的增删改查操作,简化jdbc代码. 具体例子如下: package cn ...