首先,先介绍一个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. lintcode:恢复IP地址

    恢复IP地址 给一个由数字组成的字符串.求出其可能恢复为的所有IP地址. 样例 给出字符串 "25525511135",所有可能的IP地址为: [ "255.255.11 ...

  2. java开发--配置ssh

    下面,我查阅了大量资料,走了不少错路,最后总结了经验后搭建出来的SSH框架. 希望第一次搭建SSH框架的会从中得到启发. 开发环境: eclipse-jee-kepler-SR1-win32 4.3. ...

  3. React-组件嵌套-子组件通过委托向父组件传值

    一.简述 父组件嵌套子组件,父组件的处理函数通过属性的方式赋值组子组件( <GenderSelect handleSelect={this.handleSelect}></Gende ...

  4. HighCharts开发说明及属性详解

    一.HighCharts开发说明: HighCharts 开发实际上配置HighCharts每个部分,比如配置标题(title),副标题(subtitle)等,其中每个部分又有更细的参数配置,比如标题 ...

  5. Jenkins master在windows上安装

    原文:http://www.cnblogs.com/itech/archive/2011/11/02/2233343.html 1 Jenkins Jenkins由以前的hudson更名而来.Jenk ...

  6. Android开发常用代码片段

    拨打电话 public static void call(Context context, String phoneNumber) { context.startActivity( new Inten ...

  7. ExtJs计算两个DateField所间隔的月份(天数) new Date(str) IE游览器提示NaN 处理

    需求:两个DateField控件,分别为开始时间和结束时间.当选择完结束时间后,自动计算这两个时间段所间隔的月或天数. 需要解决的问题: 1.直接使用Ext.getCmp('endDate').get ...

  8. Android中的sp与wp

    一.相关code文件 二.code具体分析 lightrefebase: refbase: sp: wp: flag: 三.使用注意事项 不能在把目标对象赋给一个长久存在的sp对象之前赋给一个短生命周 ...

  9. task判断任务是否存在

    tasklist|find /i "qq.exe" ||exit taskkill /im qq.exe /f

  10. selenium支付高版本的FireFox

    http://blog.csdn.net/pw_windgod/article/details/6537409 15:22:12.031 WARN - GET /selenium-server/dri ...