我的漫漫程序之旅

          專注于JavaWeb開發
          隨筆 - 39, 文章 - 310, 評論 - 411, 引用 - 0
          數據加載中……

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

          解決方案1:
          調用windows 的shell,但會有安全問題.

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

           *
           * 用如下代碼把該函數應用到一個HTML文件中:
           *  <script src="browseFolder.js"></script>
           * 或把下面代碼直接COPY到<script language="javascript">...</script>標簽中;

           * 特別注意的是,由于安全方面的問題,你還需要如下設置才能使本JS代碼正確運行,
           * 否者會出現"沒有權限"的問題.

           *
           * 1、設置可信任站點(例如本地的可以為:http://localhost)
           * 2、其次:可信任站點安全級別自定義設置中:設置下面的選項
           * "對沒有標記為安全的ActiveX控件進行初始化和腳本運行"----"啟用"  

          browserFolder.js:
          /***
              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, 6417);//起始目錄為:我的電腦
            //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);
              }

          }


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

          2.解決方案二:
           自己寫一個js讀取本地硬盤的選擇框, 缺點是外觀上較上一個差一些.
          <html>
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
          <title>無標題文檔</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">說明:雙擊列表框的一個選項,就將該文件夾下面的文件夾顯示在該列表框中。第一個就是根目錄</font>
                      
          </td>
                  
          </tr>
          </table>
          </body>
          </html>
          <script>
          /*
          *初始化,將系統所有的驅動器放入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 
          = "[驅動器未就緒]";
                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列表中選中的驅動器上所有文件夾放入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(
          "無法改變當前內容!")
                          }
                          
                      }

                      
          else
                      
          return false;  
                  }
                  
              }

          }


          /*
          *table_folder雙擊選項中的一個選項,就將該文件夾下面的文件夾顯示在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 々上善若水々 閱讀(16925) 評論(10)  編輯  收藏

          評論

          # re: javascript文件夾選擇框的兩種解決方案  回復  更多評論   

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

          # re: javascript文件夾選擇框的兩種解決方案  回復  更多評論   

          有沒有支持ff的?
          2008-06-18 10:34 | fredred

          # re: javascript文件夾選擇框的兩種解決方案  回復  更多評論   

          網易的網絡硬盤的上傳文件就可以你們這個功能
          2008-08-16 16:48 | 特色土

          # re: javascript文件夾選擇框的兩種解決方案  回復  更多評論   

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

          # re: javascript文件夾選擇框的兩種解決方案  回復  更多評論   

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

          # re: javascript文件夾選擇框的兩種解決方案  回復  更多評論   

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

          # re: javascript文件夾選擇框的兩種解決方案  回復  更多評論   

          @amado
          請仔細觀察步驟,我當然測試過。
          2009-08-19 18:05 | 々上善若水々

          # re: javascript文件夾選擇框的兩種解決方案  回復  更多評論   

          很好很強大
          2010-06-26 09:15 | 鵬哥

          # re: javascript文件夾選擇框的兩種解決方案  回復  更多評論   

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

          # re: javascript文件夾選擇框的兩種解決方案  回復  更多評論   

          正好用上了,就是有在linux環境中有點小問題
          2013-05-03 09:49 | 呦呦

          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 深圳市| 乾安县| 永定县| 威海市| 宝应县| 白银市| 广南县| 松原市| 株洲县| 区。| 柳河县| 永仁县| 尼玛县| 皮山县| 永和县| 七台河市| 通城县| 临桂县| 宜君县| 宕昌县| 双流县| 越西县| 尉氏县| 颍上县| 阿鲁科尔沁旗| 谢通门县| 天门市| 翼城县| 攀枝花市| 秭归县| 读书| 大埔县| 崇文区| 建瓯市| 林西县| 安庆市| 水城县| 龙陵县| 云林县| 肇东市| 石城县|