Jquery基于ActiveX的批量上传

核心提示： 流程：点击自动上传--弹出浮动窗口，展示本地磁盘--选择磁盘--列出该磁盘下所有文件夹--选择一个文件夹--点击确定--上传这里一个麻烦之处就是由于种种原因，Jquery基于ActiveX的批量上传(2)，你无法使用服务器端的fileupload控件或者客户端的input type=file控件

流程：

点击自动上传--弹出浮动窗口，展示本地磁盘--选择磁盘--列出该磁盘下所有文件夹--选择一个文件夹--点击确定--上传

这里一个麻烦之处就是由于种种原因，你无法使用服务器端的fileupload控件或者客户端的input type=file控件

这样的话就无法在服务器端用Request.File接收文件，那该如何实现？

由于用户要求选择文件夹而不是文件，所以我用不了任何控件，只能通过js构建本机文件目录，

最开始我使用了一个Jquery插件：jqueryFileTree。

插件详细和下载请见：http://abeautifulsite.net/2008/03/jquery-file-tree/。里面有使用说明和demo（英文，是个老外做的），老实说效果很好，只不过不适合我要实现的功能（用户选择服务器文件有何用？）

实现原理是通过ajax在cs方法中构建目录串输出html。这里就遇到了之前提到的问题，用服务器方法只能获取服务器的文件路径，发布之后无效。所以无法通过ajax方式获取文件的html串，只能用纯js构建。

我改造一下这个插件，这里要使用一个ActiveXObject：Scripting.FileSystemObject,是js中用来访问本机文件的插件。网上可以搜到这个插件下的方法和属性，但是不够全面，很多方法要通过自己调试js时查看变量方法和属性列表的方法找到。利用这个插件我改造了 jqueryFileTree，让它变成一个纯js访问本机文件目录。

注：此ActiveXObject的用法参照了这篇文章：http://www.cnblogs.com/dwjaissk/archive/2007/02/28/659153.html

里面有很多Scripting.FileSystemObject下面的方法和属性。

主要改造了showTree方法：

filetree

　　　function　showTree(c,　t)　{
　　　　　　　　　　　　　　　　　　　　$(c).addClass('wait');
　　　　　　　　　　　　　　　　　　　　$(".jqueryFileTree.start").remove();
　　　　　　　　　　　　　　　　　　　　var　a　=　new　Array;
　　　　　　　　　　　　　　　　　　　　t　=　unescape(t);
　　　　　　　　　　　　　　　　　　　　var　fso,　f,　fc,　a;
　　　　　　　　　　　　　　　　　　　　fso　=　new　ActiveXObject("Scripting.FileSystemObject");
　　　　　　　　　　　　　　　　　　　　$('#inputpath').val(t);
　　　　　　　　　　　　　　　　　　　　f　=　fso.GetFolder(t);
　　　　　　　　　　　　　　　　　　　　fc　=　new　Enumerator(f.SubFolders);
　　　　　　　　　　　　　　　　　　　　for　(;　!fc.atEnd();　fc.moveNext())　{
　　　　　　　　　　　　　　　　　　　　　　　　a[a.length]　=　fc.item();
　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　　　a　=　(a);
　　　　　　　　　　　　　　　　　　　　for　(var　i　=　0;　i　<　a.length;　i++)　{
　　　　　　　　　　　　　　　　　　　　　　　　var　str　=　"<ul　class='jqueryFileTree'　style='display:　none;'><li　class='directory　collapsed'><a　href='#'　rel='"　+　a[i]　+　"/'>"　+　a[i]　+　"</a></li></ul>";
　　　　　　　　　　　　　　　　　　　　　　　　$(c).removeClass('wait').append(str);
　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　　　if　(a.length　<　1)　{
　　　　　　　　　　　　　　　　　　　　　　　　$(c).removeClass('wait');
　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　　　$(c).find('.start').html('');
　　　　　　　　　　　　　　　　　　　　if　(o.root　==　t)　$(c).find('UL:hidden').show();
　　　　　　　　　　　　　　　　　　　　else　$(c).find('UL:hidden').slideDown({　duration:　o.expandSpeed,　easing:　o.expandEasing　});
　　　　　　　　　　　　　　　　　　　　bindTree(c);
　　　　　　　　　　　　　　　　}