javascript Web上传文件夹的两种解决方案

解决方案1:
调用windows 的shell,但会有安全问题.

 * browseFolder.js
 * 该文件定义了BrowseFolder()函数，它将提供一个文件夹选择对话框
 * 以供用户实现对系统文件夹选择的功能
 * 文件夹选择对话框起始目录由
 * Shell.BrowseForFolder(WINDOW_HANDLE, Message, OPTIONS, strPath)函数
 * 的strPath参数设置
 * 例如：0x11--我的电脑
 *   0 --桌面
 *  "c:\\"--系统C盘
 *
 * 用如下代码把该函数应用到一个HTML文件中：
 * 
 * 或把下面代码直接COPY到标签中；

 * 特别注意的是,由于安全方面的问题,你还需要如下设置才能使本JS代码正确运行,
 * 否者会出现"没有权限"的问题.
 *
 * 1、设置可信任站点（例如本地的可以为：http://localhost）
 * 2、其次：可信任站点安全级别自定义设置中：设置下面的选项
 * "对没有标记为安全的ActiveX控件进行初始化和脚本运行"----"启用"  

/***
    path 要显示值的对象id
****/
function browseFolder(path) {
    try {
        var Message = "\u8bf7\u9009\u62e9\u6587\u4ef6\u5939";  //选择框提示信息
        var Shell = new ActiveXObject("Shell.Application");
        var Folder = Shell.BrowseForFolder(0, Message, 64, 17);//起始目录为：我的电脑
  //var Folder = Shell.BrowseForFolder(0,Message,0); //起始目录为：桌面
        if (Folder != null) {
            Folder = Folder.items();  // 返回 FolderItems 对象
            Folder = Folder.item();  // 返回 Folderitem 对象
            Folder = Folder.Path;   // 返回路径
            if (Folder.charAt(Folder.length - 1) != "\\") {
                Folder = Folder + "\\";
            }
            document.getElementById(path).value = Folder;
            return Folder;
        }
    }
    catch (e) {
        alert(e.message);
    }
}

/***
    path 要显示值的对象id
****/
function browseFolder(path) {
    try {
        var Message = "\u8bf7\u9009\u62e9\u6587\u4ef6\u5939";  //选择框提示信息
        var Shell = new ActiveXObject("Shell.Application");
        var Folder = Shell.BrowseForFolder(0, Message, 64, 17);//起始目录为：我的电脑
  //var Folder = Shell.BrowseForFolder(0,Message,0); //起始目录为：桌面
        if (Folder != null) {
            Folder = Folder.items();  // 返回 FolderItems 对象
            Folder = Folder.item();  // 返回 Folderitem 对象
            Folder = Folder.Path;   // 返回路径
            if (Folder.charAt(Folder.length - 1) != "\\") {
                Folder = Folder + "\\";
            }
            document.getElementById(path).value = Folder;
            return Folder;
        }
    }
    catch (e) {
        alert(e.message);
    }
}

 

使用的时候:

                            "text" name="path" />


                            "button" οnclick="browseFolder('path')"
                                value="选择生成路径" />

 2.解决方案二:
 自己写一个js读取本地硬盘的选择框, 缺点是外观上较上一个差一些.

 

"Content-Type" content="text/html; charset=gb2312">
无标题文档


"0" cellpadding="0" width="100%" id="tb_show">

            "18%">文件保存位置:
            "82%">
                <%--"file" size="40"  styleClass="inputbox"/>--%>
                "backDir" type="text" value ="C:\" size="100" width="500">




            目录位置:

                "tables_drive" id="tables_drives" οnchange="get_drives()" >




            "2">
                "table_folder" id="table_folder"  size="10" multiple οndblclick="get_file()">




            "2">
                "red">说明：双击列表框的一个选项，就将该文件夹下面的文件夹显示在该列表框中。第一个就是根目录





  </span></li> 
    <li><span><span class="comment">/**/</span><span class="comment">/*</span> </span></li> 
    <li><span><span class="comment">*初始化，将系统所有的驱动器放入table_drives列表</span> </span></li> 
    <li><span><span class="comment">*/</span><span>  </span></span></li> 
    <li><span>window.onload = <span class="keyword">new</span><span> </span><span class="keyword">function</span><span> init()  </span></span></li> 
    <li><span>{  </span></li> 
    <li><span>    <span class="keyword">var</span><span> fso, s, n, e, x;  </span></span></li> 
    <li><span>    fso = <span class="keyword">new</span><span> ActiveXObject(</span><span class="string">"Scripting.FileSystemObject"</span><span>);  </span></span></li> 
    <li><span>    e = <span class="keyword">new</span><span> Enumerator(fso.Drives);  </span></span></li> 
    <li><span>    s = <span class="string">""</span><span>;  </span></span></li> 
    <li><span>    <span class="keyword">for</span><span> (; !e.atEnd(); e.moveNext())  </span></span></li> 
    <li><span>    {  </span></li> 
    <li><span>      x = e.item();  </span></li> 
    <li><span>      s = s + x.DriveLetter;  </span></li> 
    <li><span>      s += <span class="string">":"</span><span>;  </span></span></li> 
    <li><span>      <span class="keyword">if</span><span> (x.DriveType == 3)  </span></span></li> 
    <li><span>         n = x.ShareName;  </span></li> 
    <li><span>      <span class="keyword">else</span><span> </span><span class="keyword">if</span><span> (x.IsReady)  </span></span></li> 
    <li><span>         n = x.VolumeName;  </span></li> 
    <li><span>      <span class="keyword">else</span><span>  </span></span></li> 
    <li><span>         n = <span class="string">"[驱动器未就绪]"</span><span>;  </span></span></li> 
    <li><span>      s +=   n + <span class="string">","</span><span>;  </span></span></li> 
    <li><span>    }  </span></li> 
    <li><span>    <span class="keyword">var</span><span> drives = s.split(</span><span class="string">","</span><span>);      </span></span></li> 
    <li><span>    <span class="keyword">var</span><span> tableDrives = document.getElementById(</span><span class="string">"tables_drives"</span><span>);  </span></span></li> 
    <li><span>    <span class="keyword">for</span><span> ( </span><span class="keyword">var</span><span> i = 0; i < drives.length-1; i++ )  </span></span></li> 
    <li><span>    {  </span></li> 
    <li><span>        <span class="keyword">var</span><span> option = document.createElement(</span><span class="string">"OPTION"</span><span>);  </span></span></li> 
    <li><span>        drives[i].split(<span class="string">":"</span><span>);  </span></span></li> 
    <li><span>        option.value = <span class="string">"["</span><span>+drives[i].split(</span><span class="string">":"</span><span>)[0]+</span><span class="string">":]"</span><span>+drives[i].split(</span><span class="string">":"</span><span>)[1];  </span></span></li> 
    <li><span>        option.text = <span class="string">"["</span><span>+drives[i].split(</span><span class="string">":"</span><span>)[0]+</span><span class="string">":]"</span><span>+drives[i].split(</span><span class="string">":"</span><span>)[1];  </span></span></li> 
    <li><span>        tableDrives.add(option);  </span></li> 
    <li><span>    }  </span></li> 
    <li><span>}  </span></li> 
    <li><span>  </span></li> 
    <li><span><span class="comment">/**/</span><span class="comment">/*</span> </span></li> 
    <li><span><span class="comment">*tables_drives列表中选中的驱动器上所有文件夹放入table_folder列表中</span> </span></li> 
    <li><span><span class="comment">*/</span><span>  </span></span></li> 
    <li><span><span class="keyword">function</span><span> get_drives()  </span></span></li> 
    <li><span>{  </span></li> 
    <li><span>    <span class="keyword">var</span><span> tableDrives = document.getElementById(</span><span class="string">"tables_drives"</span><span>);  </span></span></li> 
    <li><span>    <span class="keyword">var</span><span> tableFolders = document.getElementById(</span><span class="string">"table_folder"</span><span>);      </span></span></li> 
    <li><span>    <span class="keyword">for</span><span> ( </span><span class="keyword">var</span><span> i = 0; i < tableDrives.options.length; i++ )  </span></span></li> 
    <li><span>    {          </span></li> 
    <li><span>        <span class="keyword">if</span><span> ( tableDrives.options[i].selected == </span><span class="keyword">true</span><span> )  </span></span></li> 
    <li><span>        {  </span></li> 
    <li><span>            <span class="keyword">var</span><span> fso, f, fc, s;              </span></span></li> 
    <li><span>            <span class="keyword">var</span><span> drive = tableDrives.options[i].value.split(</span><span class="string">":"</span><span>)[0].substring(1,tableDrives.options[i].value.split(</span><span class="string">":"</span><span>)[0].length);  </span></span></li> 
    <li><span>            document.getElementById(<span class="string">"backDir"</span><span>).value = drive + </span><span class="string">":\\"</span><span>;  </span></span></li> 
    <li><span>            fso = <span class="keyword">new</span><span> ActiveXObject(</span><span class="string">"Scripting.FileSystemObject"</span><span>);              </span></span></li> 
    <li><span>             <span class="keyword">if</span><span> (fso.DriveExists(drive))  </span></span></li> 
    <li><span>            {  </span></li> 
    <li><span>                d = fso.GetDrive(drive);  </span></li> 
    <li><span>                <span class="keyword">if</span><span> ( d.IsReady )  </span></span></li> 
    <li><span>                {  </span></li> 
    <li><span>                    f = fso.GetFolder(d.RootFolder);   </span></li> 
    <li><span>                    fc = <span class="keyword">new</span><span> Enumerator(f.SubFolders);  </span></span></li> 
    <li><span>                    s = <span class="string">""</span><span>;  </span></span></li> 
    <li><span>                    <span class="keyword">for</span><span> (;!fc.atEnd(); fc.moveNext())  </span></span></li> 
    <li><span>                    {  </span></li> 
    <li><span>                     s += fc.item();  </span></li> 
    <li><span>                     s += <span class="string">","</span><span>;  </span></span></li> 
    <li><span>                    }  </span></li> 
    <li><span>                      </span></li> 
    <li><span>                    <span class="keyword">var</span><span> len = tableFolders.options.length;  </span></span></li> 
    <li><span>                    <span class="keyword">while</span><span>(len >= 0)  </span></span></li> 
    <li><span>                    {  </span></li> 
    <li><span>                        tableFolders.options.remove(len);  </span></li> 
    <li><span>                        len--;  </span></li> 
    <li><span>                    }  </span></li> 
    <li><span>                    <span class="keyword">var</span><span> option = document.createElement(</span><span class="string">"OPTION"</span><span>);  </span></span></li> 
    <li><span>                    option.value = drive + <span class="string">":\\"</span><span>;  </span></span></li> 
    <li><span>                    option.text = drive + <span class="string">":\\"</span><span>;  </span></span></li> 
    <li><span>                    tableFolders.add(option);  </span></li> 
    <li><span>                    <span class="keyword">var</span><span> folders = s.split(</span><span class="string">","</span><span>);                                        </span></span></li> 
    <li><span>                    <span class="keyword">for</span><span> ( j = 0; j < folders.length -1; j++)  </span></span></li> 
    <li><span>                    {  </span></li> 
    <li><span>                        option = document.createElement(<span class="string">"OPTION"</span><span>);  </span></span></li> 
    <li><span>                        option.value =  folders[j];  </span></li> 
    <li><span>                        option.text = folders[j];  </span></li> 
    <li><span>                        tableFolders.add(option);  </span></li> 
    <li><span>                    }      </span></li> 
    <li><span>                }  </span></li> 
    <li><span>                <span class="keyword">else</span><span>  </span></span></li> 
    <li><span>                {  </span></li> 
    <li><span>                    alert(<span class="string">"无法改变当前内容！"</span><span>)  </span></span></li> 
    <li><span>                }                  </span></li> 
    <li><span>            }  </span></li> 
    <li><span>            <span class="keyword">else</span><span>  </span></span></li> 
    <li><span>            <span class="keyword">return</span><span> </span><span class="keyword">false</span><span>;    </span></span></li> 
    <li><span>        }          </span></li> 
    <li><span>    }  </span></li> 
    <li><span>}  </span></li> 
    <li><span>  </span></li> 
    <li><span><span class="comment">/**/</span><span class="comment">/*</span> </span></li> 
    <li><span><span class="comment">*table_folder双击选项中的一个选项，就将该文件夹下面的文件夹显示在table_folder列表中。</span> </span></li> 
    <li><span><span class="comment">*/</span><span>  </span></span></li> 
    <li><span><span class="keyword">function</span><span> get_file()  </span></span></li> 
    <li><span>{  </span></li> 
    <li><span>    <span class="keyword">var</span><span> tableFolders = document.getElementById(</span><span class="string">"table_folder"</span><span>);      </span></span></li> 
    <li><span>    <span class="keyword">var</span><span> tableDrives = document.getElementById(</span><span class="string">"tables_drives"</span><span>);  </span></span></li> 
    <li><span>    <span class="keyword">for</span><span> ( </span><span class="keyword">var</span><span> i = 0; i < tableFolders.options.length; i++ )  </span></span></li> 
    <li><span>    {  </span></li> 
    <li><span>        <span class="keyword">if</span><span> ( tableFolders.options[i].selected == </span><span class="keyword">true</span><span> )  </span></span></li> 
    <li><span>        {  </span></li> 
    <li><span>            <span class="keyword">var</span><span> fso, f, fc, s;              </span></span></li> 
    <li><span>            <span class="keyword">var</span><span> folderpath = tableFolders.options[i].value.substring(0,tableFolders.options[i].value.length);  </span></span></li> 
    <li><span>            <span class="keyword">if</span><span> ( folderpath.charAt(folderpath.length-1) == </span><span class="string">"\\"</span><span> )  </span></span></li> 
    <li><span>            {  </span></li> 
    <li><span>                document.getElementById(<span class="string">"backDir"</span><span>).value = folderpath;  </span></span></li> 
    <li><span>            }  </span></li> 
    <li><span>            <span class="keyword">else</span><span>  </span></span></li> 
    <li><span>            {  </span></li> 
    <li><span>                document.getElementById(<span class="string">"backDir"</span><span>).value = folderpath + </span><span class="string">"\\"</span><span>;  </span></span></li> 
    <li><span>            }  </span></li> 
    <li><span>              </span></li> 
    <li><span>              </span></li> 
    <li><span>            fso = <span class="keyword">new</span><span> ActiveXObject(</span><span class="string">"Scripting.FileSystemObject"</span><span>);      </span></span></li> 
    <li><span>            f = fso.GetFolder(folderpath);   </span></li> 
    <li><span>            fc = <span class="keyword">new</span><span> Enumerator(f.SubFolders);  </span></span></li> 
    <li><span>            s = <span class="string">""</span><span>;  </span></span></li> 
    <li><span>            <span class="keyword">for</span><span> (;!fc.atEnd(); fc.moveNext())  </span></span></li> 
    <li><span>            {  </span></li> 
    <li><span>             s += fc.item();  </span></li> 
    <li><span>             s += <span class="string">","</span><span>;  </span></span></li> 
    <li><span>            }      </span></li> 
    <li><span>            <span class="keyword">var</span><span> len = tableFolders.options.length;  </span></span></li> 
    <li><span>            <span class="keyword">while</span><span>(len >= 0)  </span></span></li> 
    <li><span>            {  </span></li> 
    <li><span>                tableFolders.options.remove(len);  </span></li> 
    <li><span>                len--;  </span></li> 
    <li><span>            }          </span></li> 
    <li><span>            <span class="keyword">var</span><span> opt = </span><span class="string">""</span><span>;              </span></span></li> 
    <li><span>            <span class="keyword">var</span><span> opt1 = </span><span class="string">""</span><span>;  </span></span></li> 
    <li><span>            <span class="keyword">for</span><span> ( j = 0; j < folderpath.split(</span><span class="string">"\\"</span><span>).length; j++ )  </span></span></li> 
    <li><span>            {  </span></li> 
    <li><span>                <span class="keyword">var</span><span> option = document.createElement(</span><span class="string">"OPTION"</span><span>);  </span></span></li> 
    <li><span>                opt = opt + folderpath.split(<span class="string">"\\")[j]+"</span><span>\\";  </span></span></li> 
    <li><span>                <span class="keyword">if</span><span> ( j > 0)  </span></span></li> 
    <li><span>                {  </span></li> 
    <li><span>                    opt1 = opt;  </span></li> 
    <li><span>                    option.value = opt1.substring(0,opt1.length-1);  </span></li> 
    <li><span>                    option.text = opt1.substring(0,opt1.length-1);  </span></li> 
    <li><span>                    tableFolders.add(option);      </span></li> 
    <li><span>                }  </span></li> 
    <li><span>                <span class="keyword">else</span><span>  </span></span></li> 
    <li><span>                {  </span></li> 
    <li><span>                    option.value = opt;  </span></li> 
    <li><span>                    option.text = opt;  </span></li> 
    <li><span>                    tableFolders.add(option);                              </span></li> 
    <li><span>                }  </span></li> 
    <li><span>                              </span></li> 
    <li><span>            }  </span></li> 
    <li><span>            <span class="keyword">if</span><span> ( tableFolders.options[0].value == tableFolders.options[1].value )  </span></span></li> 
    <li><span>            {  </span></li> 
    <li><span>                tableFolders.options.remove(1);  </span></li> 
    <li><span>            }   </span></li> 
    <li><span>            <span class="keyword">if</span><span> ( s != </span><span class="string">""</span><span> )          </span></span></li> 
    <li><span>            {                  </span></li> 
    <li><span>                <span class="keyword">var</span><span> folders = s.split(</span><span class="string">","</span><span>);                                        </span></span></li> 
    <li><span>                <span class="keyword">for</span><span> ( j = 0; j < folders.length -1; j++)  </span></span></li> 
    <li><span>                {  </span></li> 
    <li><span>                    option = document.createElement(<span class="string">"OPTION"</span><span>);  </span></span></li> 
    <li><span>                    option.value = folders[j];  </span></li> 
    <li><span>                    option.text = folders[j];  </span></li> 
    <li><span>                    tableFolders.add(option);  </span></li> 
    <li><span>                }      </span></li> 
    <li><span>            }                      </span></li> 
    <li><span>        }  </span></li> 
    <li><span>    }  </span></li> 
    <li><span>}  </span></li> 
    <li><span>