我的漫漫程序之旅

          專注于JavaWeb開(kāi)發(fā)
          隨筆 - 39, 文章 - 310, 評(píng)論 - 411, 引用 - 0
          數(shù)據(jù)加載中……

          javascript文件夾選擇框的兩種解決方案

          解決方案1:
          調(diào)用windows 的shell,但會(huì)有安全問(wèn)題.

           * browseFolder.js
           * 該文件定義了BrowseFolder()函數(shù),它將提供一個(gè)文件夾選擇對(duì)話框
           * 以供用戶實(shí)現(xiàn)對(duì)系統(tǒng)文件夾選擇的功能
           * 文件夾選擇對(duì)話框起始目錄由
           * Shell.BrowseForFolder(WINDOW_HANDLE, Message, OPTIONS, strPath)函數(shù)
           * 的strPath參數(shù)設(shè)置
           * 例如:0x11--我的電腦
           *   0 --桌面
           *  "c:\\"--系統(tǒng)C盤

           *
           * 用如下代碼把該函數(shù)應(yīng)用到一個(gè)HTML文件中:
           *  <script src="browseFolder.js"></script>
           * 或把下面代碼直接COPY到<script language="javascript">...</script>標(biāo)簽中;

           * 特別注意的是,由于安全方面的問(wèn)題,你還需要如下設(shè)置才能使本JS代碼正確運(yùn)行,
           * 否者會(huì)出現(xiàn)"沒(méi)有權(quán)限"的問(wèn)題.

           *
           * 1、設(shè)置可信任站點(diǎn)(例如本地的可以為:http://localhost)
           * 2、其次:可信任站點(diǎn)安全級(jí)別自定義設(shè)置中:設(shè)置下面的選項(xiàng)
           * "對(duì)沒(méi)有標(biāo)記為安全的ActiveX控件進(jìn)行初始化和腳本運(yùn)行"----"啟用"  

          browserFolder.js:
          /***
              path 要顯示值的對(duì)象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, 6417);//起始目錄為:我的電腦
            //var Folder = Shell.BrowseForFolder(0,Message,0); //起始目錄為:桌面
                  if (Folder != null{
                      Folder 
          = Folder.items();  // 返回 FolderItems 對(duì)象
                      Folder = Folder.item();  // 返回 Folderitem 對(duì)象
                      Folder = Folder.Path;   // 返回路徑
                      if (Folder.charAt(Folder.length - 1!= "\\"{
                          Folder 
          = Folder + "\\";
                      }

                      document.getElementById(path).value 
          = Folder;
                      
          return Folder;
                  }

              }

              
          catch (e) {
                  alert(e.message);
              }

          }


           使用的時(shí)候:
          <td>
                                      
          <input type="text" name="path" />
                                  
          </td>
                                  
          <td>
                                      
          <input type="button" onclick="browseFolder('path')"
                                          value
          ="選擇生成路徑" />
                                  
          </td>

          2.解決方案二:
           自己寫一個(gè)js讀取本地硬盤的選擇框, 缺點(diǎn)是外觀上較上一個(gè)差一些.
          <html>
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
          <title>無(wú)標(biāo)題文檔</title>
          </head>
          <body>
          <table border="0" cellpadding="0" width="100%" id="tb_show">        
                  
          <tr>
                      
          <td width="18%">文件保存位置:</td>
                      
          <td width="82%"> 
                          
          <%--<html:file property="file" size="40"  styleClass="inputbox"/>--%>
                          
          <input name="backDir" type="text" value ="C:\" size="100" width="500">
                      
          </td>
                  
          </tr>
                  
                  
          <tr>
                      
          <td>目錄位置:</td>
                      
          <td> 
                          
          <select name="tables_drive" id="tables_drives" onchange="get_drives()" ></select>
                      
          </td>
                  
          </tr>
                  
                  
          <tr>    
                      
          <td colspan="2">            
                          
          <select name="table_folder" id="table_folder"  size="10" multiple ondblclick="get_file()"></select>
                      
          </td>
                  
          </tr>

                  
          <tr>
                      
          <td colspan="2">
                          
          <font color="red">說(shuō)明:雙擊列表框的一個(gè)選項(xiàng),就將該文件夾下面的文件夾顯示在該列表框中。第一個(gè)就是根目錄</font>
                      
          </td>
                  
          </tr>
          </table>
          </body>
          </html>
          <script>
          /*
          *初始化,將系統(tǒng)所有的驅(qū)動(dòng)器放入table_drives列表
          */

          window.onload 
          = new function init()
          {
              
          var fso, s, n, e, x;
              fso 
          = new ActiveXObject("Scripting.FileSystemObject");
              e 
          = new Enumerator(fso.Drives);
              s 
          = "";
              
          for (; !e.atEnd(); e.moveNext())
              
          {
                x 
          = e.item();
                s 
          = s + x.DriveLetter;
                s 
          += ":";
                
          if (x.DriveType == 3)
                   n 
          = x.ShareName;
                
          else if (x.IsReady)
                   n 
          = x.VolumeName;
                
          else
                   n 
          = "[驅(qū)動(dòng)器未就緒]";
                s 
          +=   n + ",";
              }

              
          var drives = s.split(",");    
              
          var tableDrives = document.getElementById("tables_drives");
              
          for ( var i = 0; i < drives.length-1; i++ )
              
          {
                  
          var option = document.createElement("OPTION");
                  drives[i].split(
          ":");
                  option.value 
          = "["+drives[i].split(":")[0]+":]"+drives[i].split(":")[1];
                  option.text 
          = "["+drives[i].split(":")[0]+":]"+drives[i].split(":")[1];
                  tableDrives.add(option);
              }

          }


          /*
          *tables_drives列表中選中的驅(qū)動(dòng)器上所有文件夾放入table_folder列表中
          */

          function get_drives()
          {
              
          var tableDrives = document.getElementById("tables_drives");
              
          var tableFolders = document.getElementById("table_folder");    
              
          for ( var i = 0; i < tableDrives.options.length; i++ )
              
          {        
                  
          if ( tableDrives.options[i].selected == true )
                  
          {
                      
          var fso, f, fc, s;            
                      
          var drive = tableDrives.options[i].value.split(":")[0].substring(1,tableDrives.options[i].value.split(":")[0].length);
                      document.getElementById(
          "backDir").value = drive + ":\\";
                      fso 
          = new ActiveXObject("Scripting.FileSystemObject");            
                       
          if (fso.DriveExists(drive))
                      
          {
                          d 
          = fso.GetDrive(drive);
                          
          if ( d.IsReady )
                          
          {
                              f 
          = fso.GetFolder(d.RootFolder); 
                              fc 
          = new Enumerator(f.SubFolders);
                              s 
          = "";
                              
          for (;!fc.atEnd(); fc.moveNext())
                              
          {
                               s 
          += fc.item();
                               s 
          += ",";
                              }

                              
                              
          var len = tableFolders.options.length;
                              
          while(len >= 0)
                              
          {
                                  tableFolders.options.remove(len);
                                  len
          --;
                              }

                              
          var option = document.createElement("OPTION");
                              option.value 
          = drive + ":\\";
                              option.text 
          = drive + ":\\";
                              tableFolders.add(option);
                              
          var folders = s.split(",");                                      
                              
          for ( j = 0; j < folders.length -1; j++)
                              
          {
                                  option 
          = document.createElement("OPTION");
                                  option.value 
          =  folders[j];
                                  option.text 
          = folders[j];
                                  tableFolders.add(option);
                              }
              
                          }

                          
          else
                          
          {
                              alert(
          "無(wú)法改變當(dāng)前內(nèi)容!")
                          }
                          
                      }

                      
          else
                      
          return false;  
                  }
                  
              }

          }


          /*
          *table_folder雙擊選項(xiàng)中的一個(gè)選項(xiàng),就將該文件夾下面的文件夾顯示在table_folder列表中。
          */

          function get_file()
          {
              
          var tableFolders = document.getElementById("table_folder");    
              
          var tableDrives = document.getElementById("tables_drives");
              
          for ( var i = 0; i < tableFolders.options.length; i++ )
              
          {
                  
          if ( tableFolders.options[i].selected == true )
                  
          {
                      
          var fso, f, fc, s;            
                      
          var folderpath = tableFolders.options[i].value.substring(0,tableFolders.options[i].value.length);
                      
          if ( folderpath.charAt(folderpath.length-1== "\\" )
                      
          {
                          document.getElementById(
          "backDir").value = folderpath;
                      }

                      
          else
                      
          {
                          document.getElementById(
          "backDir").value = folderpath + "\\";
                      }

                      
                      
                      fso 
          = new ActiveXObject("Scripting.FileSystemObject");    
                      f 
          = fso.GetFolder(folderpath); 
                      fc 
          = new Enumerator(f.SubFolders);
                      s 
          = "";
                      
          for (;!fc.atEnd(); fc.moveNext())
                      
          {
                       s 
          += fc.item();
                       s 
          += ",";
                      }
              
                      
          var len = tableFolders.options.length;
                      
          while(len >= 0)
                      
          {
                          tableFolders.options.remove(len);
                          len
          --;
                      }
                  
                      
          var opt = "";            
                      
          var opt1 = "";
                      
          for ( j = 0; j < folderpath.split("\\").length; j++ )
                      
          {
                          
          var option = document.createElement("OPTION");
                          opt 
          = opt + folderpath.split("\\")[j]+"\\";
                          
          if ( j > 0)
                          
          {
                              opt1 
          = opt;
                              option.value 
          = opt1.substring(0,opt1.length-1);
                              option.text 
          = opt1.substring(0,opt1.length-1);
                              tableFolders.add(option);    
                          }

                          
          else
                          
          {
                              option.value 
          = opt;
                              option.text 
          = opt;
                              tableFolders.add(option);                            
                          }

                                      
                      }

                      
          if ( tableFolders.options[0].value == tableFolders.options[1].value )
                      
          {
                          tableFolders.options.remove(
          1);
                      }
           
                      
          if ( s != "" )        
                      
          {                
                          
          var folders = s.split(",");                                      
                          
          for ( j = 0; j < folders.length -1; j++)
                          
          {
                              option 
          = document.createElement("OPTION");
                              option.value 
          = folders[j];
                              option.text 
          = folders[j];
                              tableFolders.add(option);
                          }
              
                      }
                              
                  }

              }

          }

          </script>

          如果您還有好的解決方案,回帖分享一下吧.

          posted on 2008-06-17 15:55 々上善若水々 閱讀(16935) 評(píng)論(10)  編輯  收藏

          評(píng)論

          # re: javascript文件夾選擇框的兩種解決方案  回復(fù)  更多評(píng)論   

          如果都使用JS讀取資源的話,別無(wú)他法。第二種方法可以擴(kuò)展為利用server腳本讀取server資源展現(xiàn)給客戶端。
          2008-06-18 08:22 | HiMagic!

          # re: javascript文件夾選擇框的兩種解決方案  回復(fù)  更多評(píng)論   

          有沒(méi)有支持ff的?
          2008-06-18 10:34 | fredred

          # re: javascript文件夾選擇框的兩種解決方案  回復(fù)  更多評(píng)論   

          網(wǎng)易的網(wǎng)絡(luò)硬盤的上傳文件就可以你們這個(gè)功能
          2008-08-16 16:48 | 特色土

          # re: javascript文件夾選擇框的兩種解決方案  回復(fù)  更多評(píng)論   

          我用了第一中方法。可是還有一個(gè)問(wèn)題,就是選擇了遠(yuǎn)程計(jì)算機(jī)上的文件夾,怎么獲得全路徑?
          2008-11-28 14:03 | justin

          # re: javascript文件夾選擇框的兩種解決方案  回復(fù)  更多評(píng)論   

          怎么都有缺陷啊。不過(guò)更傾向于第一種
          2009-02-10 12:24 | niufadian

          # re: javascript文件夾選擇框的兩種解決方案  回復(fù)  更多評(píng)論   

          ,呵呵,謝謝能分享
          2009-06-17 21:03 | 明君

          # re: javascript文件夾選擇框的兩種解決方案  回復(fù)  更多評(píng)論   

          @amado
          請(qǐng)仔細(xì)觀察步驟,我當(dāng)然測(cè)試過(guò)。
          2009-08-19 18:05 | 々上善若水々

          # re: javascript文件夾選擇框的兩種解決方案  回復(fù)  更多評(píng)論   

          很好很強(qiáng)大
          2010-06-26 09:15 | 鵬哥

          # re: javascript文件夾選擇框的兩種解決方案  回復(fù)  更多評(píng)論   

          很好,借用了。。
          2011-05-25 11:52 | gepangtsai

          # re: javascript文件夾選擇框的兩種解決方案  回復(fù)  更多評(píng)論   

          正好用上了,就是有在linux環(huán)境中有點(diǎn)小問(wèn)題
          2013-05-03 09:49 | 呦呦

          只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。


          網(wǎng)站導(dǎo)航:
           
          主站蜘蛛池模板: 贵阳市| 新邵县| 苗栗市| 白水县| 长宁县| 宝坻区| 来宾市| 桓仁| 方正县| 仁化县| 台北市| 鄂温| 伊吾县| 本溪| 中江县| 遂平县| 铁岭市| 南皮县| 乌苏市| 大渡口区| 靖安县| 四子王旗| 道真| 武宣县| 兴隆县| 兴义市| 郸城县| 包头市| 岢岚县| 偃师市| 类乌齐县| 达拉特旗| 大渡口区| 黄骅市| 南昌市| 云梦县| 古蔺县| 汕头市| 彭泽县| 宁津县| 龙陵县|