利用Flash上传大文件:swfupload修改以及详细说明

Flash Player 8可以支持100MB以下的大文件上传。目前,已经有许多网站利用Flash Player的这个特性来上传大文件了。例如著名的youtubeBox.net国内的G宝盘等等。在互联网上,很早我就找到了这个不错的开源swf上传组件:SWFUpload,但是由于它不太符合项目需求,并且没有帮助材料,我对它进行了一些修改。

注意:SWFUpload组件的版权归原作者所有

修改主要体现在以下几个方面:

  • 由“一选择就上传”改为“先选择,后上传”;
  • 加入了选择成功的回调函数设定
  • 支持单文件上传和多文件上传模式
  • 可以删除待上传队列中的文件
  • 支持按照设定的顺序上传特定类型的文件

以下是针对此组件所写的一个比较详细的中文说明:

使用说明:

将jscripts目录上传至服务器,不要修改其中的文件路径
mmSWFUpload.js是调用swf的核心文件,不要修改其路径和内容
upload.swf是上传主功能所在文件,不要修改其路径和内容
progressbar.png是上传进度条图像文件,可以替换和修改

example.js是定义本例所使用的JavaScript函数的文件,可以修改
example.css定义本例的外观,可以修改
index.htm是本文件,可以修改

进度条、选择文件的列表等所有效果全部由JavaScript实现,具体的实现未知详见sample.js中相关函数

=============================================================
swf提供的供JavaScript调用的函数

mmSWFUpload.callSWF()
此函数打开一个选择文件对话框
当选择成功时,swf会回调select_done_callback参数中定义的JavaScript函数,
当选择不成功(取消)时,swf会回调upload_cancel_callback参数中定义的JavaScript函数
使用示例:<a href="javascript:mmSWFUpload.callSWF();">选择文件</a>

mmSWFUpload.doDelete()
此函数删除待上传文件队列中的最后一个文件
当删除成功时,swf会回调delete_done_callback中定义的JavaScript函数
使用示例:<a href="javascript:mmSWFUpload.doDelete();">删除</a>

mmSWFUpload.doUpload()
此函数告知swf开始上传文件队列
当上传开始时,swf会回调upload_start_callback中定义的函数
当上传正在进行中时,swf会回调upload_progress_callback中定义的函数
当上传出错时,swf会回调upload_error_callback中定义的函数
当上传完成时,swf会回调upload_complete_callback中定义的函数
当队列中的所有文件上传完成时,swf会回调upload_queue_complete_callback中定义的函数
使用示例:<a href="javascript:mmSWFUpload.doUpload();">上传</a>

=============================================================
参数介绍:

debug
是否使用调试模式,在调试模式下会显示mmSWFUpload的设置信息

upload_backend
用于上传的后台程序地址。这个地址是相对于mmSWFUpload.js的

target
swf显示于那个div中?这里指定div的id

link_mode
如果不希望自动显示上传链接,将值设为standalone

link_text
上传链接的文字。如果使用了link_mode,则参数无效。
如果希望用一个图片代替上传链接,则注释此行,设定css_class参数值

css_class
用于修饰上传链接。这是一个CSS类的名称

allowed_filesize
允许的最大文件大小。单位KB

select_mode
值为空:            只能选择一个文件上传,每次选择的新文件会替换旧文件
值为multifile:     每次选择的新文件会加在待上传文件队列的末尾
值为multifileLimit:这种情况下,必须定义select_multifile_limit,
根据select_multifile_limit定义的扩展名顺序选择上传文件,
如果选择的文件顺序与select_multifile_limit定义的顺序不匹配,
则会禁止选择并调用upload_error_callback,错误代码为-60。
当按照定义的顺序选择文件完毕后,会调用select_multifile_done_callback定义的JavaScript函数。

select_multifile_limit
此参数仅当select_mode值为multifileLimit时有效
定义要按顺序上传的文件扩展名,扩展名间用英文半角逗号分隔
例如要上传三个文件,第一个为jpg图片,第二个为doc文档,第三个为zip压缩包,
则定义为“.jpg,.doc,.zip”

allowed_filetypes
允许的文件扩展名

==============================================================
函数介绍:

此处的参数定义的是当一个事件发生时swf调用的JavaScript函数名称

upload_start_callback
上传开始的时候调用,参数介绍见sample.js中的uploadStart定义

upload_progress_callback
上传进行中调用,参数介绍见sample.js中的uploadProgress定义

upload_complete_callback
上传完成调用,参数介绍见sample.js中的uploadComplete定义

upload_error_callback
上传失败调用,参数介绍见sample.js中的uploadError定义

upload_cancel_callback
上传取消调用,参数介绍见sample.js中的uploadCancel定义

upload_queue_complete_callback
所有上传队列完成后调用,参数介绍见sample.js中的uploadQueueComplete定义

select_done_callback
选择一个文件成功后回调,参数介绍见sample.js中的selectedDone定义

select_multifile_done_callback
此函数仅当select_mode值为multifileLimit时有效
当按照select_multifile_limit定义的顺序选择完成后调用
参数介绍见sample.js中的selectMultifileDone定义

delete_done_callback
当在上传列表中删除一个已经选择的等待上传的文件时调用
删除待上传文件使用mmSWFUpload.doDelete()
参数介绍见sample.js中的deleteDone定义

修改后的组件下载:

http://www.zengrong.net/wp-content/uploads/2007/03/swfupload.zip

=======================================================================
PS.
本文的修改是基于0.8.5版本进行的,写完这篇文章,又去SWFUpload主页看了看,发现作者已经将其更新到1.0.2版本,并且改用FlashDevelop开发(原来使用Flash IDE开发)。新版本提供了一个选项auto_upload来控制是自动上传还是先选择后上传,网站上还提供了详细的帮助文档

原文: http://www.zengrong.net/?p=331

本实例采用的是Uploadify上传插件,.NET程序,源程序是从网上找的,但是有Bug,已经修改好,并标有部分注释。绝对好用,支持单文件、多文件上传,支持大文件上传,已经过多方面测试,保证好用。 以下附上Uploadify部分常用的参数介绍,要看全部的就去看其API文件了,一般在下载的包里都有。  uploader : uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后弹出打开文件对话框,默认值:uploadify.swf。   script : 后台处理程序的相对路径 。默认值:uploadify.php   checkScript :用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径   fileDataName :设置一个名字,在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata   method : 提交方式Post 或Get 默认为Post   scriptAccess :flash脚本文件的访问模式,如果在本地测试设置为always,默认值:sameDomain   folder : 上传文件存放的目录 。   queueID : 文件队列的ID,该ID与存放文件队列的div的ID一致。   queueSizeLimit : 当允许多文件生成时,设置选择文件的个数,默认值:999 。   multi : 设置为true时可以上传多个文件。   auto : 设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传 。   fileDesc : 这个属性值必须设置fileExt属性后才有效,用来设置选择文件对话框中的提示文本,如设置fileDesc为“请选择rar doc pdf文件”,打开文件选择框效果如下图:   fileExt : 设置可以选择的文件的类型,格式如:'*.doc;*.pdf;*.rar' 。   sizeLimit : 上传文件的大小限制 。   simUploadLimit : 允许同时上传的个数 默认值:1 。   buttonText : 浏览按钮的文本,默认值:BROWSE 。   buttonImg : 浏览按钮的图片的路径 。   hideButton : 设置为true则隐藏浏览按钮的图片 。   rollover : 值为true和false,设置为true时当鼠标移到浏览按钮上时有反转效果。   width : 设置浏览按钮的宽度 ,默认值:110。   height : 设置浏览按钮的高度 ,默认值:30。   wmode : 设置该项为transparent 可以使浏览按钮的flash背景文件透明,并且flash文件会被置为页面的最高层。 默认值:opaque 。   cancelImg :选择文件文件队列中后的每一个文件上的关闭按钮图标 Uploadify还自带了很多参数及有用的方法和回调函数,都在API里,虽然是全英文的,但很容易看懂,这里就不说了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值