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 方法。） 

//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(支持原创)