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(支持原创)
swfupload浅谈的更多相关文章
- 浅谈 Fragment 生命周期
版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...
- 浅谈 LayoutInflater
浅谈 LayoutInflater 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/View 文中如有纰漏,欢迎大家留言指出. 在 Android 的 ...
- 浅谈Java的throw与throws
转载:http://blog.csdn.net/luoweifu/article/details/10721543 我进行了一些加工,不是本人原创但比原博主要更完善~ 浅谈Java异常 以前虽然知道一 ...
- 浅谈SQL注入风险 - 一个Login拿下Server
前两天,带着学生们学习了简单的ASP.NET MVC,通过ADO.NET方式连接数据库,实现增删改查. 可能有一部分学生提前预习过,在我写登录SQL的时候,他们鄙视我说:“老师你这SQL有注入,随便都 ...
- 浅谈WebService的版本兼容性设计
在现在大型的项目或者软件开发中,一般都会有很多种终端, PC端比如Winform.WebForm,移动端,比如各种Native客户端(iOS, Android, WP),Html5等,我们要满足以上所 ...
- 浅谈angular2+ionic2
浅谈angular2+ionic2 前言: 不要用angular的语法去写angular2,有人说二者就像Java和JavaScript的区别. 1. 项目所用:angular2+ionic2 ...
- iOS开发之浅谈MVVM的架构设计与团队协作
今天写这篇博客是想达到抛砖引玉的作用,想与大家交流一下思想,相互学习,博文中有不足之处还望大家批评指正.本篇博客的内容沿袭以往博客的风格,也是以干货为主,偶尔扯扯咸蛋(哈哈~不好好工作又开始发表博客啦 ...
- Linux特殊符号浅谈
Linux特殊字符浅谈 我们经常跟键盘上面那些特殊符号比如(?.!.~...)打交道,其实在Linux有其独特的含义,大致可以分为三类:Linux特殊符号.通配符.正则表达式. Linux特殊符号又可 ...
- 浅谈Angular的 $q, defer, promise
浅谈Angular的 $q, defer, promise 时间 2016-01-13 00:28:00 博客园-原创精华区 原文 http://www.cnblogs.com/big-snow/ ...
随机推荐
- lintcode:恢复IP地址
恢复IP地址 给一个由数字组成的字符串.求出其可能恢复为的所有IP地址. 样例 给出字符串 "25525511135",所有可能的IP地址为: [ "255.255.11 ...
- java开发--配置ssh
下面,我查阅了大量资料,走了不少错路,最后总结了经验后搭建出来的SSH框架. 希望第一次搭建SSH框架的会从中得到启发. 开发环境: eclipse-jee-kepler-SR1-win32 4.3. ...
- React-组件嵌套-子组件通过委托向父组件传值
一.简述 父组件嵌套子组件,父组件的处理函数通过属性的方式赋值组子组件( <GenderSelect handleSelect={this.handleSelect}></Gende ...
- HighCharts开发说明及属性详解
一.HighCharts开发说明: HighCharts 开发实际上配置HighCharts每个部分,比如配置标题(title),副标题(subtitle)等,其中每个部分又有更细的参数配置,比如标题 ...
- Jenkins master在windows上安装
原文:http://www.cnblogs.com/itech/archive/2011/11/02/2233343.html 1 Jenkins Jenkins由以前的hudson更名而来.Jenk ...
- Android开发常用代码片段
拨打电话 public static void call(Context context, String phoneNumber) { context.startActivity( new Inten ...
- ExtJs计算两个DateField所间隔的月份(天数) new Date(str) IE游览器提示NaN 处理
需求:两个DateField控件,分别为开始时间和结束时间.当选择完结束时间后,自动计算这两个时间段所间隔的月或天数. 需要解决的问题: 1.直接使用Ext.getCmp('endDate').get ...
- Android中的sp与wp
一.相关code文件 二.code具体分析 lightrefebase: refbase: sp: wp: flag: 三.使用注意事项 不能在把目标对象赋给一个长久存在的sp对象之前赋给一个短生命周 ...
- task判断任务是否存在
tasklist|find /i "qq.exe" ||exit taskkill /im qq.exe /f
- selenium支付高版本的FireFox
http://blog.csdn.net/pw_windgod/article/details/6537409 15:22:12.031 WARN - GET /selenium-server/dri ...