[js]Folder browser - Softwareontwikkeling

dinsdag 21 augustus 2007 20:55

Acties:

Topicstarter

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:

JavaScript:

   <html>
<head>
  <title>Browse Folders</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
var currentFolder="";
function GetDriveList(){
  var fso, obj, n, e, item, arr=[];
try {
  fso = new ActiveXObject("Scripting.FileSystemObject");
}
catch(er) {
  alert('Could not load Drives. The ActiveX control could not be started.');
  cancelFolder();
}

  e = new Enumerator(fso.Drives);
  for(;!e.atEnd();e.moveNext()){
    item = e.item();
    obj = {letter:"",description:""};
    obj.letter = item.DriveLetter;
    if (item.DriveType == 3) obj.description = item.ShareName;
    else if (item.IsReady) obj.description = item.VolumeName;
    else obj.description = "[Drive not ready]";
    arr[arr.length]=obj;
  }
  return(arr);
}
function GetSubFolderList(fld){
  var e, arr=[];
  var fso = new ActiveXObject("Scripting.FileSystemObject");
  var f = fso.GetFolder(fld.toString());
  var e = new Enumerator(f.SubFolders);
  for(;!e.atEnd();e.moveNext()){
    arr[arr.length]=e.item().Name;
  }
  return(arr);
}
function loadDrives(){
  var drives=GetDriveList(),list="";
  for(var i=0;i<drives.length;i++){
    list+="<div onclick=\"loadList('"+drives[i].letter+':\\\\\')" class="folders" onmouseover="highlight(this)" onmouseout="unhighlight(this)">'+drives[i].letter+':\\ - '+ drives[i].description+'</div>';
  }
  document.getElementById("path").innerHTML='<a href="" onclick="loadDrives();return false" title="My Computer">My Computer</a>\\';
  document.getElementById("list").innerHTML=list;
  currentFolder="";
}
function loadList(fld){
  var path="",list="",paths=fld.split("\\");
  var divPath=document.getElementById("path");
  var divList=document.getElementById("list");
  for(var i=0;i<paths.length-1;i++){
    if(i==paths.length-2){
      path+=paths[i]+' \\';
    }else{
      path+="<a href=\"\" onclick=\"loadList('";
      for(var j=0;j<i+1;j++){
        path+=paths[j]+"\\\\";
      }
      path+='\');return false">'+paths[i]+'</a> \\ ';
    }
  }
  divPath.innerHTML='<a href="" onclick="loadDrives();return false">My Computer</a> \\ '+path;
  divPath.title="My Computer\\"+paths.toString().replace(/,/g,"\\");
  currentFolder=paths.toString().replace(/,/g,"\\");

  var subfolders=GetSubFolderList(fld);
  for(var j=0;j<subfolders.length;j++){
    list+="<div onclick=\"loadList('"+(fld+subfolders[j]).replace(/\\/g,"\\\\")+'\\\\\')" onmouseover="highlight(this)" onmouseout="unhighlight(this)" title="'+subfolders[j]+'" class="folders">'+subfolders[j]+"</div>";
  }
  divList.innerHTML=list;
  resizeList();
  divPath.scrollIntoView();
}
function resizeList(){
  var divList=document.getElementById("list");
  var divPath=document.getElementById("path");
  if(document.body.clientHeight>0 && divPath.offsetHeight>0){
    divList.style.height=document.body.clientHeight-divPath.scrollHeight;
  }
}
function highlight(div){
  div.className="folderButton";
}
function unhighlight(div){
  div.className="folders";
}
function selectFolder(){
  window.returnValue=currentFolder;
  window.close();
}
function cancelFolder(){
  window.returnValue="";
  window.close();
}
-->
</SCRIPT>
<style>
#header{
  background-color: #CCCCCC;
  border-bottom: solid 1px black;
}
#path{
  position:relative;
  font-size: 8pt;
  font-family: Arial;
  font-weight: bold;
  padding: 2px;
}
#list{
  font-size: 10pt;
  font-family: Arial;
  overflow:auto;
}
.folders{
  padding: 1px;
  border-top: solid 1px white;
  border-left: solid 1px white;
  border-right: solid 1px white;
  border-bottom: solid 1px black;
  cursor: hand;
  pointer: hand;
  background-color: white;
}
.folderButton{
  padding: 0px;
  border-style: outset;
  border-width: 2px;
  border-color:;
  cursor: hand;
  pointer: hand;
  background-color: #CCCCCC;
}
A{
  color:blue;
  text-decoration:none;
  padding:3px;
}
A:hover{
  background-color: #CCCCCC;
  padding:1px;
  border-style: outset;
  border-width: 2px;
}
</style>
</head>
<body onload="loadDrives()" onresize="resizeList()" marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" scroll=no>
<form>
<div id="container">
  <table border="0" cellpadding="0" cellspacing="0" id="header">
    <tr>
      <td><div id="path"></div></td>
      <td align="right" width="1%" nowrap>
        <input type="button" value="Select" onclick="selectFolder()"><input type="button" value="Cancel" onclick="cancelFolder()">
      </td>
    </tr>
  </table>
  <div id="list">You must allow the ActiveX control to run in order to use this dialog.</div>
</div>
</form>
</body>
</html>

Oproep van dialog:

JavaScript:

  <script language="JavaScript">
function getFolder(){
  return showModalDialog("folderDialog.html","","width:400px;height:400px;resizeable:yes;");
}
</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:

JavaScript:

<html>
<head>
<title>Folder test</title>
</head>
<body>
<script language="JavaScript">
function getFolder(){
  return showModalDialog("folderDialog.html","","width:400px;height:400px;resizeable:yes;");
}
</SCRIPT>
<body>
<form>
<input type="text" name="yourFieldName"><input type="button" value="Browse..." onclick="this.form.yourFieldName.value=getFolder()">
</html>

Dan werkt het wel..

wat doe ik nu verkeerd?

dinsdag 21 augustus 2007 20:59

Acties:

Creepy

Tactical Espionage Splatterer

Kan je je code misschien wat kleiner maken en alle overodige zaken eruit halen? De css code is echt niet nodig voor het javascript en ActiveX gebeuren. Daarnaast is het voornamelijk javascript en dat hoort in Programming wat prima uitgelegd staat in Waar hoort mijn topic?

Move -> WEB

"I had a problem, I solved it with regular expressions. Now I have two problems". That's shows a lack of appreciation for regular expressions: "I know have _star_ problems" --Kevlin Henney

dinsdag 21 augustus 2007 21:26

Acties:

bibawa

Topicstarter

de css laat ik ff staan voor die paar lijnen die zullen het niet maken

dinsdag 21 augustus 2007 21:34

Acties:

SchizoDuckie

Kwaak

Creepy schreef op dinsdag 21 augustus 2007 @ 20:59:
Daarnaast is het voornamelijk javascript en dat hoort in Programming Webdesign, Markup & Clientside Scripting wat prima uitgelegd staat in Waar hoort mijn topic?

bibawa schreef op dinsdag 21 augustus 2007 @ 21:26:
de css laat ik ff staan voor die paar lijnen die zullen het niet maken

Als een modje je zoiets vraagt is het wijs daar even gehoor aan te geven. Ook de gebruikers zitten hier namelijk puur voor de lol en ik lees niet graag voor de lol een code brei van 162 regels al er misschien 15 daarvan relevant zijn, en da's ook exact de reden waarom ik nu even niet op je directe vraagstelling in ga.

Verder, je was zo op de goede weg met debuggen. Waarom ga je niet verder tot je de oplossing hebt

Een andere manier die misschien wel voor je werkt om in 1x een berg files te uploaden is trouwens http://digitarald.de/project/fancyupload/ wat wel x-browser werkt, en geen ranzige activex stuff nodig heeft. (ActiveX == evil)

[ Voor 15% gewijzigd door SchizoDuckie op 21-08-2007 21:36 ]

Stop uploading passwords to Github!

dinsdag 21 augustus 2007 22:02

Acties:

bibawa

Topicstarter

Ik heb naar die fancyupload gekeken en dat zou ook wel ideaal zijn...

maar het is wel vrij slecht gedocumenteerd, hoe het juist werkt moet ik zeggen

USAGE:
* var inputElement = $E('input[type="file"]');
* new FancyUpload(inputElement, {
* swf: '../swf/Swiff.Uploader.swf'
* // more options
*

ik zit al vast bij wat er achter inputElement = moet komen

woensdag 22 augustus 2007 10:04

Acties:

djluc

Gewoon het voorbeeld gebruiken: http://digitarald.de/playground/uplooad.html Daar staat zelfs een linkje bij: http://digitarald.de/playground/server/upload.phps

woensdag 22 augustus 2007 12:27

Acties:

bibawa

Topicstarter

ik zie daar dus nergens hoe ik het juist moet implementeren, in de code staat net FancyUpload(), maar dat kan niet alles zijn en dat is het niet.. Uit de php code kan ik niet afleiden HOE ik het geheel zichtbaar moet maken ...

woensdag 22 augustus 2007 12:43

Acties:

SchizoDuckie

Kwaak

bibawa schreef op woensdag 22 augustus 2007 @ 12:27:
ik zie daar dus nergens hoe ik het juist moet implementeren, in de code staat net FancyUpload(), maar dat kan niet alles zijn en dat is het niet.. Uit de php code kan ik niet afleiden HOE ik het geheel zichtbaar moet maken ...

Ik heb het idee dat je überhaupt totaal geen kaas gegeten hebt van scripten. Weet je wel zeker dat je zoiets wil gaan programmeren?

Zo ja dan raad ik je toch echt aan om te lezen, lezen, lezen, lezen...

Stop uploading passwords to Github!

woensdag 22 augustus 2007 17:38

Acties:

bibawa

Topicstarter

Laten we even verder gaan op m'n code hierboven, ik heb nu in IE een debugger opgengegooid en ik weet ondertussen dat de fout op lijn 17 en 147 zit . op lijn 17 krijg ik "Drives is null or not an object"..

Ik weet verdorie niet wat ik verkeerd doe en waarom het in een simpelere html file wel perfect werkt

woensdag 22 augustus 2007 18:18

Acties:

bibawa

Topicstarter

Bon....

Ik heb hetgeen wat ik krijg als broncode wanneer ik de pagina oproep opgeslagen als .html, dit uitgevoered en dit werkt perfect...

Toch werkt het in de echte website niet.. Kan dit te maken hebben dat het meewordt uitgevoerd door de php parser?

woensdag 22 augustus 2007 19:41

Acties:

SchizoDuckie

Kwaak

Heb je je IE security settings al helemaal omlaag gegooid?

Stop uploading passwords to Github!

Pagina: 1

Reageer