Tout d'abord, créez un programme côté serveur pour générer un fichier XML à renvoyer au client (getfolder.asp).
<%
'écrit par Linzhang Chen, 20/04/2003
' Veuillez indiquer la source et conserver ces informations de copyright lors de la réimpression.
réponse.write "<?xml version=""1.0"" encoding=""GB2312""?>"&chr(13)
réponse.write "<fichier multimédia>"&chr(13)
dossiers=requête("dossier")
si dossiers="/" alors
dossiers=""
finir si
faible nombre
compte=0
dossiers=remplacer(dossiers,"..","")
basefolder="../media/"'chemin du dossier de base
nouveau dossier = dossier de base et dossiers
Définir fso =server.CreateObject("Scripting.FileSystemObject")
set f=fso.getfolder(server.mappath(newfolder))
définir sf=f.subfolders
pour chaque fd dans sf' renvoie une liste de dossiers sous le chemin spécifié
réponse.write "<fichier>"&chr(13)
réponse.write "<ftype>dossier</ftype>"&chr(13)
réponse.write "<fname>"&fd.name&"</fname>"&chr(13)
réponse.write "</file>"&chr(13)
compte=compte+1
suivant
définir sf = rien
définir ff=f.Fichiers
pour chaque fi dans ff
fname=fi.nom
if instr("asf,wma,wmv",lcase(mid(fname,instrrev(fname,".")+1)))>0 then'Définissez les types de fichiers autorisés à être renvoyés pour éviter les fuites de code source
réponse.write "<fichier>"&chr(13)
réponse.write "<ftype>fichier</ftype>"&chr(13)
réponse.write "<fname>"&fname&"</fname>"&chr(13)
réponse.write "</file>"&chr(13)
compte=compte+1
finir si
suivant
'S'il n'y a pas de fichier dans le répertoire, envoie un élément vide
si compte=0 alors
réponse.write "<fichier>"&chr(13)
réponse.write "<ftype>vide</ftype>"&chr(13)
réponse.write "<fname>0</fname>"&chr(13)
réponse.write "</file>"&chr(13)
finir si
réponse.write "</mediafile>"
définir ff = rien
définir f = rien
définir fso = rien
%>
Ce qui suit est le travail du client JS (selectfile.asp)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<TÊTE>
<TITLE> Sélectionner le fichier vidéo</TITLE>
<style>
td{taille de police:9pt}
sélectionner{width:210}
.s2{largeur:250}
</style>
<LANGUE SCRIPT="JavaScript">
<!--
/*écrit par Linzhang Chen, 20/04/2003
Veuillez indiquer la source et conserver ces informations de copyright lors de la réimpression*/
//Précharger les images
var imgback = nouvelle image();
imgback.src = "images/flèche.gif";
var imgbackgray = new Image();
imgbackgray.src = "images/grayarrow.gif";
var imgfolder = nouvelle image ();
imgfolder.src = "images/dossier.gif";
var imggrayfolder = nouvelle image ();
imggrayfolder.src = "images/grayfolder.gif";
//Pile de tableaux d'historique
var arhistory=nouveau tableau();
varhisi=0;
//Utilisé pour déterminer le nom du fichier à renvoyer
vérification de la fonction()
{
si (document.all.filename.value=="")
{
alert("Veuillez d'abord sélectionner le fichier");
renvoie faux ;
}
autre
{
window.returnValue =document.f1.folder.value+document.all.filename.value;
window.close();
}
}
//Récupère le contenu du fichier XML
fonction getuserlist (url)
{ var oXMLDoc = new ActiveXObject('MSXML');
oXMLDoc.url = url ;
var ooRoot=oXMLDoc.root;
retourner ooRoot ;
}
//Lorsqu'un fichier est sélectionné, renvoie cette valeur dans la zone de texte
fonction addfile (txt)
{
document.all.filename.value=txt;
}
var first=1;//Définir une
fonction variable globale userlist(folders,ti)//Liste les cases sélectionnées
{document.f1.folder.value=dossiers ;
filebox.document.body.innerHTML="Chargement du fichier, veuillez patienter...";
var strshow="";
var timeoutid=null ;
var nouveau dossier="";
var arrfolder=nouveau tableau();
var arrff=nouveau tableau();
var blankstr="";
var oItem;
//Déterminer le statut historique
hisi+=ti;
arhistory[hisi]=dossiers ;
si (hisi==0)
{
arrow.innerHTML="<img src="images/grayarrow.gif">";
}
autre
{
arrow.innerHTML="<img src="images/arrow.gif" border=0 style="cursor:hand" onclick="userlist('"+arrhistory[hisi-1]+"',- 1)" onmouseover="this.src='images/arrow_over.gif'" onmouseout="this.src='images/arrow.gif'">";
}
//Détermine le dossier actuel
si (document.f1.folder.value=="")
{
dossierid.innerHTML="<img src="images/grayfolder.gif">"
}
autre
{newsfolder=checkfolder(document.f1.folder.value)
dossierid.innerHTML="<img src="images/folder.gif" border=0 style="cursor:hand" onclick="userlist('"+newsfolder+"',1)" onmouseover= "this.src='images/folder_over.gif'" onmouseout="this.src='images/folder.gif'">"
}
// Attribuer une valeur à la liste déroulante
document.all.select.options.length=0;
nouveau dossier = dossiers ;
dossierstr=""
var _obj=document.all.select;
var _o=document.createElement("Option");
__o.text="Sélectionner le dossier" ;
_o.value="";
_obj.add(_o);
si (nouveau dossier ! ="")
{arrfolder=nouveau dossier.split("/")
pour(var i=0;i<arrfolder.length-1;i++)
{blankstr+=" " ;
dossierstr+=arrfolder[i]+"/";
_o=document.createElement("Option");
_o.text=blankstr+arrfolder[i];
_o.value=folderstr;
_obj.add(_o);
}
}
document.all.select.options[document.all.select.options.length-1].selected=true;
url="getfolder.asp.gl?folder="+folders;
oRoot=getuserlist(url)
strshow="<table class=file Cellspacing=0 cellpadding=0>";
len=oRoot.children.length;
si (len==1)
{oItem = oRoot.children.item(0);
if(oItem.children.item(0).text=="vide")
strshow="Plus de fichiers et de dossiers";
autre
{
if(oItem.children.item(0).text=="dossier")
{
strshow+="<tr><td><A href="javascript:parent.userlist('"+folders+oItem.children.item(1).text+"/"+"',1)"><img src="images/mediafolder.gif" border=0 >"+oItem.children.item(1).text+"</A></td></tr>";
}
autre
{
strshow+="<tr><td><a href="javascript:parent.addfile('"+oItem.children.item(1).text+"')" ><img src="images/mediafile. gif" border=0>"+oItem.children.item(1).text+"</A></td></tr>";
}
}
strshow+="</table>"
}
autre{
//Pousse les données sur la pile
pour(i=0;i<len;i++)
{oItem = oRoot.children.item(i);
if(oItem.children.item(0).text=="dossier")
{
arrff[i]="<A href="javascript:parent.userlist('"+folders+oItem.children.item(1).text+"/"+"',1)"><img src= "images/mediafolder.gif" border=0>"+oItem.children.item(1).text+"</A>";
}
autre
{
arrff[i]="<A href="javascript:parent.addfile('"+oItem.children.item(1).text+"')"><img src="images/mediafile.gif" border=0 height=12>"+oItem.children.item(1).text+"</A>";
}
}
//Obtenir le nombre de colonnes à afficher
si (len<=6)
{x=1 ;
y=6 ;}
autre
{x=len/6;
y=6 ;}
pour(var i=0;i<y;i++)
{strshow+="<tr>"
pour(var j=0;j<x;j++)
{ponits=j*y+i;
si (ponits>=len)
{
strshow+="<td> </td>";
}
autre
{
strshow+="<td>"+arrff[ponits]+"</td>";
}
}
strshow+="</tr>"
}
strshow+="</table>"
}
filebox.document.body.innerHTML=strshow;
}
//-->
</SCRIPT>
<script LANGUE="vbscript">
fonction checkfolder(folderstr)
si (folderstr="" ou instr(folderstr,"/")=instrrev(folderstr,"/")) alors
checkfolder=""
autre
nfolder=gauche(folderstr,len(folderstr)-1)
checkfolder=left(ndossier,instrrev(ndossier,"/"))
finir si
fonction de fin
</script>
</HEAD>
<BODY style="margin:0" bgColor=menu onload="javascript:userlist('',0)">
<table width="443" border="0" cellpacing="0">
<tr>
<td height="36"><table width="409" border="0">
<tr>
<td width="73" align="right">Plage de recherche (<u>I</u>) :</td>
<td width="214"><select name="select" id="select" size="1" onchange="javascript:userlist(this.value,1);">
</select></td>
<td width="22" valign="baseline" id="arrow" align=right></td>
<td width="20" valign="middle" id="folderid"></td>
<td width="20" align="left"><img src="images/md.gif" width="16" height="15"></td>
<td width="28" align="left"><img src="images/viewtype.gif" width="23" height="14"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="120"><table width="100%" height="100%" border="0">
<tr>
<td width="9"> </td>
<td>
<iframe src="blank.htm" width=415 height=120 id="filebox"></iframe></td>
<td width="13"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="60"><table width="100%" border="0">
<FORM METHOD=POST ACTION="" nom="f1">
<input type="hidden" name="folder" value="">
<tr>
<td width="85" align="right">Nom du fichier (<u>N</u>) : </td>
<td width="254"><input type="text" id="filename" size="34"></td>
<td><button onclick="javascript:return check()"> Ouvrir (<u>O</U>)</button></td>
</tr>
</FORM>
<tr>
<td align="right">Type de fichier (<u>T</u>) :</td>
<td><select name="select2" class=s2>
<option>Diffusion de fichiers multimédias (*.asf, *.wmv, *.wma)</option>
</select></td>
<td><input type="button" name="Submit" value=" Annuler " onclick="window.close();"></td>
</tr>
</table></td>
</tr>
</table>
</CORPS>
</HTML>
Il existe également un petit fichier blank.htm permettant de définir le style d'affichage des fichiers et dossiers.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<TÊTE>
<TITLE> Nouveau document </TITLE>
<style>
td{font-size:9pt}
corps{font-size:9pt}
.file A{COULEUR : #000000 ; TEXTE-DÉCORATION : aucun ; taille de police : 9 pt}
.file A : visité {COULEUR : #000000 ; TEXTE-DÉCORATION : aucun ; taille de police : 9pt}
.file A : survol {COULEUR : #000000 ; TEXTE-DÉCORATION : aucun ; taille de police : 9pt}
</style>
</HEAD>
<BODY style="margin: 0pt">
</BODY>
</HTML>
Lors de l'appel, utilisez la fonction suivante pour obtenir l'effet de sélectionner des fichiers côté serveur qui ressemblent au vrai.
fonction selectfile()
{
var arr = showModalDialog("selectfile.asp?temp="+Math.random(), "", "dialogWidth:453px; dialogHeight:252px; status:0;help:1");
si (arr != nul)
{
retour arr
}
}
La dernière chose renvoyée par cette fonction est le nom du fichier sélectionné. Vous pouvez récupérer plusieurs images utilisées dans la fonction dans la zone de sélection de fichier :)
On estime que vous pourriez rencontrer divers BUGs inconnus lors de l'utilisation. Invitez tout le monde à communiquer avec moi : E_mail : [email protected].