公司产品中一直是采用 flash 实现文件上传功能,但用户的需求多了以后遇到了越来越多难以解决的问题,最后试着用硕正提供的freeform、小型页面控件来解决。
硕正文件上传的实现途径有3、4种,由于公司产品发布的需要,就选择了其中的 httpPost 方案,其它的象 ftp、Http put尽管也是不错的选择,但需要另外建站,或涉及权限问题,恐怕最终用户的部署维护会吃不消。
httpPost方案还有一个非常好的优点,就是文件上传后是保存到文件还是保存到数据库,都很容易实现。
我们的需求以及最终实现了的功能特点在此先罗列一下:
1. 支持多文件上传;
2. 支持超过4G的大文件上传;
3. 使用硕正的Zip选项,压缩上传,以减轻带宽压力;
4. 支持断点续传,记忆对上次失败的发包位置;
5. 支持异步上传,免得在上传大文件时浏览器卡死;
6. 有进度条的图示,我们没有采用硕正自带的进度条,而是用js自己写了一个,里面的信息更多,界面更友好;
7. 可以随时取消上传;
结合硕正文档,我们完成了开发,最终的界面如下:
开始上传:
上传中:
上传结束:
怎么样, 功能很完备吧?硕正控件是 2px X 2px 躲在左上角,平时看不到。
如下是源码中的关键部分:
客户端js: Upload_Client.js
后端C#: Upload_Server.aspx.cs
有几点须说明:
1. 必须采用分包,设定包的尺寸(PartSize),包的大小要适中,太大的话进度条步进太慢,太小的话硕正发起的Request太多会影响效率;
2. 由于是异步上传,必须充分利用硕正 OnEvent 事件,进度条上的信息就是来自事件参数的;
如下按工作步骤逐段分析一下这个客户端的js:
步骤一.打开硕正套件提供的对话框,选择文件
步骤二.上传
步骤三.发起上传
步骤四.侦听上传事件
说明一下:源码中的“Download”的部分,是和上传无关的。其实我们同时也实现了文件下载的功能,用的是硕正全局函数中的“Download”函数,由于下载比较简单,我们在此就不作分析了。
最后,任务圆满完成。和以前的flash上传相比,双方各有优劣,以下列出一些对比:
Supcan的优势
1.1 使用简单,后台基本只需要负责接收数据即可, Flash的 http Body中同时安插了上传参数和文件的二进制流,二者夹杂在一起导致后端解析异常复杂,一旦涉及大数据必须实现接口HttpModule以绕过IIS对文件大小的限制(默认4M),换之以底层抽取Http中的数据,实现难度大,数据接收失败率高,而且后期维护较繁琐。而硕正的http body中就是纯数据,根本不需要解析它,所有的控制参数都安置在URL中,后端解析非常清晰:
这些参数中还有数据包的MD5参数,后端能轻易验证数据包的正确性;
1.2 Flash对超大数据支持不足,而Supcan则提供了超过4G的超大数据上传支持;
1.3 Flash不支持通过传入文件路径进行文件上传方式,而Supcan能很好支持通过路径进行文件上传;
1.4 Flash不支持断点续传,Supcan本身就是通过数据包方式传输到后台,原生支持断点续传,只要在后端保存已上传的块数,即可支持断点续传;
1.5 Supcan支持客户端压缩,节省带宽。
Flash的优势
2.1 浏览器支持多,能很好兼容大部分浏览器,Supcan支持主流浏览器,但在firefox效果不佳,在打开文件选择对话框时会导致控件崩溃情况,硕正的答复是与Firefox的消息处理有底层冲突,无法解决;
2.2 Flash事件更丰富,提供很多事件接口给开发者调用;
2.3 Flash文件上传队列做的比较好,能自动逐个上传文件,而Supcan需要在js中循环调用;
2.4 Flash上传界面支持自定义,允许创建丰富的UI.