login  Naam:   Wachtwoord: 
Registreer je!
 Forum

[js/html/php]Folder selecteren

Offline bibawa - 21/08/2007 20:36
Avatar van bibawaNieuw lid Hoe kan ik met javascript/html een folder laten selecteren? als ik <input type='file' gebruik dan kun je een bestand selecteren maar geen gehele folder..

Ik had wel een JS script gevonden maar dat werkte met activeX en dus alleen compatibel met IE

6 antwoorden

Gesponsorde links
Offline BramBo - 22/08/2007 09:23
Avatar van BramBo JS gevorderde Wat wil je bereiken ?

Inprincipe heeft javascript geen toegang tot de hardeschijf (alleen temp inet files, maar dit kan je niet helemaal als lokale schijf beschouwen). Zoals je zelf al zei kan je met ActiveX de hardeschijf benaderen, dit is tot op heden de enige manier om dit te bereiken (en gelukkig maar).
Offline ArndJan - 22/08/2007 12:04
Avatar van ArndJan PHP interesse
bibawa schreef:
Ik had wel een JS script gevonden maar dat werkte met activeX en dus alleen compatibel met IE


Je kunt activeX idd alleen in IE gebriuken maar je kunt dit ook aanpassen.

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var xmlHttp;
  2. try
  3. {
  4. 	xmlHttp = new XMLHttpRequest();
  5. }
  6. catch (e)
  7. {
  8. 	try
  9. 	{
  10. 		xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  11. 	}
  12. 	catch (e)
  13. 	{
  14. 		try
  15. 		{
  16. 			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  17. 		}
  18. 		catch (e)
  19. 		{
  20. 			return false;
  21. 		}
  22. 	}
  23. }
Offline bibawa - 22/08/2007 12:30
Avatar van bibawa Nieuw lid Dit had ik eerst:

(omdat dit gewoon copy & paste is van GOT heb ik er de code niet uitgenomen en op plaatscode.be gezet zal dit volgende keer wel doen 

Ik zou de gebruiker de mogellijkheid moeten geven om een folder te selecteren, de <input type='file' laat me in de steek want hiermee kan je enkel een bestand selecteren..

Nu had ik volgend script gevonden dat wel werkt via ActiveX en zodus enkel in IE zou werken maar dat was geen probleem:

folderdialog.html:
js code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>

  2. <head>

  3.   <title>Browse Folders</title>

  4. <SCRIPT LANGUAGE="JavaScript">

  5. <!--

  6. var currentFolder="";

  7. function GetDriveList(){

  8.   var fso, obj, n, e, item, arr=[];

  9. try {

  10.   fso = new ActiveXObject("Scripting.FileSystemObject");

  11. }

  12. catch(er) {

  13.   alert('Could not load Drives. The ActiveX control could not be started.');

  14.   cancelFolder();

  15. }

  16.  
  17.   e = new Enumerator(fso.Drives);

  18.   for(;!e.atEnd();e.moveNext()){

  19.     item = e.item();

  20.     obj = {letter:"",description:""};

  21.     obj.letter = item.DriveLetter;

  22.     if (item.DriveType == 3) obj.description = item.ShareName;

  23.     else if (item.IsReady) obj.description = item.VolumeName;

  24.     else obj.description = "[Drive not ready]";

  25.     arr[arr.length]=obj;

  26.   }

  27.   return(arr);

  28. }

  29. function GetSubFolderList(fld){

  30.   var e, arr=[];

  31.   var fso = new ActiveXObject("Scripting.FileSystemObject");

  32.   var f = fso.GetFolder(fld.toString());

  33.   var e = new Enumerator(f.SubFolders);

  34.   for(;!e.atEnd();e.moveNext()){

  35.     arr[arr.length]=e.item().Name;

  36.   }

  37.   return(arr);

  38. }

  39. function loadDrives(){

  40.   var drives=GetDriveList(),list="";

  41.   for(var i=0;i<drives.length;i++){

  42.     list+="<div onclick=\"loadList('"+drives[i].letter+':\\\\\')" class="folders" onmouseover="highlight(this)" onmouseout="unhighlight(this)">'+drives[i].letter+':\\ - '+ drives[i].description+'</div>';

  43.   }

  44.   document.getElementById("path").innerHTML='<a href="" onclick="loadDrives();return false" title="My Computer">My Computer</a>\\';

  45.   document.getElementById("list").innerHTML=list;

  46.   currentFolder="";

  47. }

  48. function loadList(fld){

  49.   var path="",list="",paths=fld.split("\\");

  50.   var divPath=document.getElementById("path");

  51.   var divList=document.getElementById("list");

  52.   for(var i=0;i<paths.length-1;i++){

  53.     if(i==paths.length-2){

  54.       path+=paths[i]+' \\';

  55.     }else{

  56.       path+="<a href=\"\" onclick=\"loadList('";

  57.       for(var j=0;j<i+1;j++){

  58.         path+=paths[j]+"\\\\";

  59.       }

  60.       path+='\');return false">'+paths[i]+'</a> \\ ';

  61.     }

  62.   }

  63.   divPath.innerHTML='<a href="" onclick="loadDrives();return false">My Computer</a> \\ '+path;

  64.   divPath.title="My Computer\\"+paths.toString().replace(/,/g,"\\");

  65.   currentFolder=paths.toString().replace(/,/g,"\\");

  66.  
  67.   var subfolders=GetSubFolderList(fld);

  68.   for(var j=0;j<subfolders.length;j++){

  69.     list+="<div onclick=\"loadList('"+(fld+subfolders[j]).replace(/\\/g,"\\\\")+'\\\\\')" onmouseover="highlight(this)" onmouseout="unhighlight(this)" title="'+subfolders[j]+'" class="folders">'+subfolders[j]+"</div>";

  70.   }

  71.   divList.innerHTML=list;

  72.   resizeList();

  73.   divPath.scrollIntoView();

  74. }

  75. function resizeList(){

  76.   var divList=document.getElementById("list");

  77.   var divPath=document.getElementById("path");

  78.   if(document.body.clientHeight>0 && divPath.offsetHeight>0){

  79.     divList.style.height=document.body.clientHeight-divPath.scrollHeight;

  80.   }

  81. }

  82. function highlight(div){

  83.   div.className="folderButton";

  84. }

  85. function unhighlight(div){

  86.   div.className="folders";

  87. }

  88. function selectFolder(){

  89.   window.returnValue=currentFolder;

  90.   window.close();

  91. }

  92. function cancelFolder(){

  93.   window.returnValue="";

  94.   window.close();

  95. }

  96. -->

  97. </SCRIPT>

  98. <style>

  99. #header{

  100.   background-color: #CCCCCC;

  101.   border-bottom: solid 1px black;

  102. }

  103. #path{

  104.   position:relative;

  105.   font-size: 8pt;

  106.   font-family: Arial;

  107.   font-weight: bold;

  108.   padding: 2px;

  109. }

  110. #list{

  111.   font-size: 10pt;

  112.   font-family: Arial;

  113.   overflow:auto;

  114. }

  115. .folders{

  116.   padding: 1px;

  117.   border-top: solid 1px white;

  118.   border-left: solid 1px white;

  119.   border-right: solid 1px white;

  120.   border-bottom: solid 1px black;

  121.   cursor: hand;

  122.   pointer: hand;

  123.   background-color: white;

  124. }

  125. .folderButton{

  126.   padding: 0px;

  127.   border-style: outset;

  128.   border-width: 2px;

  129.   border-color:;

  130.   cursor: hand;

  131.   pointer: hand;

  132.   background-color: #CCCCCC;

  133. }

  134. A{

  135.   color:blue;

  136.   text-decoration:none;

  137.   padding:3px;

  138. }

  139. A:hover{

  140.   background-color: #CCCCCC;

  141.   padding:1px;

  142.   border-style: outset;

  143.   border-width: 2px;

  144. }

  145. </style>

  146. </head>

  147. <body onload="loadDrives()" onresize="resizeList()" marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" scroll=no>

  148. <form>

  149. <div id="container">

  150.   <table border="0" cellpadding="0" cellspacing="0" id="header">

  151.     <tr>

  152.       <td><div id="path"></div></td>

  153.       <td align="right" width="1%" nowrap>

  154.         <input type="button" value="Select" onclick="selectFolder()"><input type="button" value="Cancel" onclick="cancelFolder()">

  155.       </td>

  156.     </tr>

  157.   </table>

  158.   <div id="list">You must allow the ActiveX control to run in order to use this dialog.</div>

  159. </div>

  160. </form>

  161. </body>

  162. </html>


Oproep van dialog:

js code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="JavaScript">

  2. function getFolder(){

  3.   return showModalDialog("folderDialog.html","","width:400px;height:400px;resizeable:yes;");

  4. }

  5. </SCRIPT>


Nu heb ik dat oproep script bovenaan m'n pagina staan (onder body) en folderdialog.html ergewoon bij..

Als ik het script nu oproep dan gaat de popup open maar krijg ik steeds de error couldn't load the ActiveX object..

Als ik nu echter een gewoon html bestand maak om het op te roepen met volgende code in:

js code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>

  2. <head>

  3. <title>Folder test</title>

  4. </head>

  5. <body>

  6. <script language="JavaScript">

  7. function getFolder(){

  8.   return showModalDialog("folderDialog.html","","width:400px;height:400px;resizeable:yes;");

  9. }

  10. </SCRIPT>

  11. <body>

  12. <form>

  13. <input type="text" name="yourFieldName"><input type="button" value="Browse..." onclick="this.form.yourFieldName.value=getFolder()">

  14. </html>


Dan werkt het wel..

wat doe ik nu verkeerd?
Offline BramBo - 22/08/2007 15:31
Avatar van BramBo JS gevorderde Waarschijnlijk heeft het te maken met de beveiliging in je browser..

probeer in je catch statement de error eens te alerten ( alert(er.description ); ) (in IE was het geloof ik gewoon er dus zonder .description)
Offline bibawa - 22/08/2007 17:33
Avatar van bibawa Nieuw lid Ik krijg dan de fout "Drives is null or not an object " 
Offline BramBo - 23/08/2007 09:44
Avatar van BramBo JS gevorderde hmm, heb je de alert gezet in je huidige catch (regel 13). Als het zo is en je krijgt deze error dan is er iets goed fout.

Verder kan ik je aanbevelen om a. een doctype te gebruiken. b. encoding. en als laatste je script element type='text/javascript' en niet language=..
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.162s