多附件上传控件uploadify的使用心得

最近开发项目时使用到了多附件上传控件。比较普遍使用的多附件上传控件一般都是JS+FLASH，还有支持JS+HTML，JS+Silverlight等等，不过都没有js+FLASH的普及，毕竟flashplayer现在基本上是个浏览器，上过网的都会安装，所以使用JS+FLASH插件对客户端的要求稍微简单些。

因为以往使用过uploadify控件，所以做该项目时第一个考虑的就是它。

官网地址为http://www.uploadify.com/

现在已经出到了3.2版本，其功能强大，页面效果相对比较美观。我在项目尝试的时候使用的例子如下：

去官网上下载版本后

前台页面：

添加引用

jquery也是去官网上下载最新的，1.8版本

        <script language="javascript" src='/js/uploadify/jquery.min.js' type="text/javascript"></script>
        <script language="javascript" src='/js/uploadify/jquery.uploadify.min.js' type="text/javascript"></script>
        <LINK href='/js/uploadify/uploadify.css' type=text/css rel=stylesheet>

$("#uploadify").uploadify({
                'auto'     : false,     //false:选择文件后不直接上传，true选择文件后直接上传，默认是true
                'method'   : 'post', //传递给服务器文件的方式，默认就是post
                'swf'      : '/js/uploadify/uploadify.swf',  //控件中flash文件的地址，这个地址用相对地址和绝对地址都可以
                'uploader' : '/UploadHandler.aspx',       //后台服务的地址，我使用的是.net 做的开发，该地址最好使用相对地址，使用绝对地址时在很多情况下我用不了
                'fileTypeExts'  :'*.html;*.htm',            //选择的文件过滤类型，选择文件时可以只显示你选择的文件，如果不想做控制，则删除即可
                'height':'20',                                  
                'width':'70',
                'buttonText':' 浏览...',
                'onSelect':function (file) {                                                              
                    $('#uploadify').uploadify('settings','formData',{
                            'param':'value',
                            'param2':'value'
                            });
                }, //这里设置附件带的参数，因为某些参数不是在页面初始化时就已经确定了的，所以最好在这里设置参数，意思就是说在选择文件时候再去设置需要传递给后台的数据， 这样就能够附带一些诸如选择的上传日期呀，之类的不是在页面初始化完成时能确定的而需要用户在上传前设置的参数
                onQueueComplete:function(queueData){
                      alert('所选文件已经全部上传');
                    }//这里可以获取上传完成后所有上传队列里的信息
            });

这些参数是项目中我需要设置的属性，还有很多属性和事件，诸如上传失败响应事件等等，具体可以看官网的文档，不过貌似该控件并没有对用户自己定义的上传失败有相应的处理相应机制，控件提供的上传失败，只是针对服务器异常，比如IO异常，等等的处理机制，但如果用户想自定义错误，比如根据业务逻辑，如果上传的文件在服务器上找不到其对应的目录，则报异常，对于这样的自定义错误，我想到的是解决方案是使用onUploadSuccess该响应事件，根据后台的response.write信息来判断该文件是否上传成功。

HTML代码：

//选择控件的地方

<i nput type="text" disabled="true"><i nput id="uploadify" name="uploadify" type="button" value="添加">

//点击上传

< a runat="server" id="ibtMultiSubmit" href="javascript:$('#uploadify').uploadify('upload','*')">上传</ a>

 

后台程序

             // 在此处放置用户代码以初始化页面
                HttpPostedFile file= Request.Files["Filedata"];
                string param1=Request.Params["param1"];

                string param2=Request.Params["param2"];

 获取到内容和参数后做自己的业务处理即可，如果没有异常返回，则也不需要用response.write。

 该控件的使用大概如此，网上使用的资料也非常多。不过在本人使用控件的过程中，的确也出现了很多问题

 问题1：后台服务页面的地址必须使用相对路径（/UploadHandler.aspx）而不能使用绝对路径（http://***/UploadHandler.aspx），该问题我在IE6和IE8上测试均出现该问题，Request.Files["Filedata"]为null。对此深感不明，希望有不同意见的同仁能共同探讨一下

问题2：我做的这个项目的运行环境是IIS6+.NET 所以系统在输入域名后，需要做一个跳转页面，因为系统很多子系统，有几层的虚拟目录，整个系统的首页也是在虚拟目录下，需要在站点目录下做一个跳转页面，该跳转页面只有跳转的功能，我们弄的时候，使用default.asp页面，该页面只有一句response.redirect（....）跳转到整个系统的首页。问题也就随之而来，当我们使用域名直接访问系统（经过default.asp页面跳转后）在进入我做的多附件上传子系统，使用的时候，每次Request.Files["Filedata"]都为null，去网上查找了资料发现uploadify在使用flash时会导致站点的session丢失。并且response.redirect在一定程度上也会导致服务器通知客户端重新请求，有破坏SESSION的可能性。虽然该控件官网上已经有了处理丢失SESSION 的解决方案，但在我做的这个例子中，出现的问题不是使用不了SESSION的问题，而是由该问题导致的Request.Files["Filedata"]为null的问题，当不经过跳转页面（default.asp）直接使用全路径访问系统http://www.**.com/indexwebui/index.aspx时，就能正常获取Request.Files["Filedata"]。为了减少response.redirect对session的影响，我把跳转页面换成了default.html，在前台用JS做跳转window.location.href=''的方式。这种方式下，通过跳转页面进入系统也会存在一个怪异的问题，当你手动清空IE页面缓存后，使用uploadify控件上传，Request.Files["Filedata"]依然为空，不过当你关闭IE浏览器页面，再次打开只要你不去清空IE缓存，就能一直正常使用。根据我个人的分析，这貌似跟COOKIE和SESSION还是有点关系，只是不知道uploadify控件在与FLASH交互的过程机制是怎样的。感兴趣的同仁可以按照我这个环境再验证一下我遇到的问题。本人可是被这个问题困扰了一段时间。

对于以上这两个问题，使用pluload多附件上传控件就不会遇到，只可惜pluload控件貌似不支持IE6，系统由于是老系统，推荐使用的是IE6，所以也没办法，只能使用uploadify，虽然清空缓存能导致它偶尔不能用，不过貌似也没太多用户喜欢清空缓存，并且该功能目前使用的人数不多，管理员才用，，，所以只能将就
如果有同仁还有更好的控件，又能支持IE6，又不会存在我以上分析的那两个问题，请不吝赐教。