file selection

Status
Niet open voor verdere reacties.
T

tuxido devito

Gebruiker
Lid geworden
8 apr 2007
Berichten
71
Ik ben bezig met een script dat uit een input/file element een waarde haald en die in een 'boodschappenlijstje' zet. Er passen 10 bestanden op de lijst. Elke keer moet de eerste vrije plek worden gezocht. Ik heb nu dit script.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title></title>

<script type="text/javascript">
function addfile(file)
{
  var i=1;
  var maxfiles=10;
  
  while (i<=maxfiles)
  {
    if (document.getElementById('file'+i).innerHTML='<i></i>')
    {
      document.getElementById('file'+i).innertHTML='<i>'+file+'</i>';
	  break():
	}
    
	i++;
  }
}
</script>

</head>

<body>
<table width="422" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="418">
	<form id="form1" name="form1" enctype="multipart/form-data" method="post" action="">
      <input type="file" name="browser" onchange="addfile(this.value)" />
    Multiple Files Selector 
	</form>
    </td>
  </tr>
  <tr>
    <td>
	<div id="file1"><i></i></div>
	<div id="file2"><i></i></div>
	<div id="file3"><i></i></div>
	<div id="file4"><i></i></div>
	<div id="file5"><i></i></div>
	<div id="file6"><i></i></div>
	<div id="file7"><i></i></div>
	<div id="file8"><i></i></div>
	<div id="file9"><i></i></div>
	<div id="file10"><i></i></div>
	</td>
  </tr>
</table>
</body>
</html>

Het werkt alleen voor geen meter, kan iemande mij helpen?
 
PHP: 
== '<I></I>'
zou het moeten zijn == in vergelijkingen en hoofdletter i, het uitlezen van innerHTML zet de tags in hoofdletters. :)

Maar dan nog probeer je een 10x lus die bij de eerste file al alle divs vult. :confused:

Ik zou het eerder zo doen:
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title></title>

<script type="text/javascript">
 var maxfiles = 10;
 var files = new Array();
 function addfile(file) {
  if (files.length < maxfiles) {
   files[files.length] = file;
   document.getElementById('fileselection').innerHTML = files.join('<br>');
   } else {
   alert('Het maximum van ' + maxfiles + ' is bereikt!');
   };
  };
</script>

</head>

<body>
<table width="422" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="418">
	<form id="form1" name="form1" enctype="multipart/form-data" method="post" action="">
      <input type="file" onchange="addfile(this.value)" />
    Multiple Files Selector 
	</form>
    </td>
  </tr>
  <tr>
   <td>
    <div id="fileselection"></div>
   </td>
  </tr>
</table>
</body>
</html>
Zo vul je de array files met de filenamen en krijg je na 10x een alert dat het maximum is bereikt. :)


Vr.Gr. Egel.
 
Bedankt, ik ga thuis is ff prutsen met deze info. Ik schrijf graag de zooi graag zodat ik er ook nog wat van opsteek (mijn javascript is nog niet zo goed jofel...)
 
Het script van jouw werkt wel maar het is niet in staat om het zo in te stellen dat je ook nog uiteindelijk een file kan deselecteren die niet aan het uiteinde staat en dan een nieuwe kunt kiezen. Dit wil ik wel bereiken. Het gekke is dat als volgens mijn script ga kijken wat

document.getElementById('file'+i).innertHTML

voor waarde geeft krijg ik undefined... Wat houd dat nu weer in?
 
ik ben toch behoorlijk trots op mijn gepruts. Ik heb even zelf een vrij goed werkend iets gemaakt door te leren (bedankt), het werkt nu wel met arrays alleen is het zo gemaakt dat de eerste lege plek in de array word gekozen. Het werkt dus test het maar eens...

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title></title>

<script type="text/javascript">
 var maxfiles = 10;
 var files = new Array();
 for (i=1; i<=10; i++)
 {
   files[i]=''
 }
 
 function addfile(file)
 {
   for (i=1; i<=10; i++)
   {
     if (files[i]=='')
	 {
	   files[i]=file+'<a id="'+i+'" href="#" onclick="removefile('+i+')"> [remove]</a><br>'
	   break
	 }	
   }
   document.getElementById('fileselection').innerHTML = files.join('')
 }
 
 function removefile(i)
 {
   files[i]=''
   document.getElementById('fileselection').innerHTML = files.join('')
 }
 </script>

</head>

<body>
<table width="422" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="418">
    <form id="form1" name="form1" enctype="multipart/form-data" method="post" action="">
      <input type="file" onchange="addfile(this.value)" />
    Multiple Files Selector 
    </form>
    </td>
  </tr>
  <tr>
   <td>
    <div id="fileselection"></div>
   </td>
  </tr>
</table>
</body>
</html>
 
Dat script werkt dus maar als de gebruiker in het file field html invoert zal dit effect hebben op de markup van de pagina. Sql injections zijn te voorkomen met php maar ik wil ook de interface beschermen. Hoe doe ik dit?
 
tuxido devito zei:
Dat script werkt dus maar als de gebruiker in het file field html invoert zal dit effect hebben op de markup van de pagina. Sql injections zijn te voorkomen met php maar ik wil ook de interface beschermen. Hoe doe ik dit?
Klik om te vergroten...
Code: 
  file = file.replace(/[\*\?\"\<\>]/g,'');
filtert *?"<> uit de filenaam. :)
tuxido devito zei:
ik ben toch behoorlijk trots op mijn gepruts. Ik heb even zelf een vrij goed werkend iets gemaakt door te leren (bedankt), het werkt nu wel met arrays alleen is het zo gemaakt dat de eerste lege plek in de array word gekozen. Het werkt dus test het maar eens...
Klik om te vergroten...
Werkt goed. :thumb:

Ik zocht zelf naar een oplossing met .splice() waarmee je een element uit een array kunt wissen (de rest krimpt dan in). Maar over hoe je dat aanstuurt (vanwege het opschuiven) moest ik eerst een nachtje slapen. ;)
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title></title>

<script type="text/javascript">
 var maxfiles = 10;
 var files = new Array();

 function addfile(file) {
  file = file.replace(/[\*\?\"\<\>]/g,'');
  if (files.length < maxfiles) {
   files[files.length] = file + ' [<a href="javascript:void(delfile(' + new Date().getTime() + '))">remove</a>]<br>';
   document.getElementById('fileselection').innerHTML = files.join('');
   } else {
   alert('Het maximum van ' + maxfiles + ' is bereikt,\nverwijder eerst een ander bestand!');
   };
  };

 function delfile(time) {
  for (var i = files.length - 1; i >= 0; i--) {
   if (files[i].indexOf(time) > -1) {
    files.splice(i,1);
    };
   };
  document.getElementById('fileselection').innerHTML = files.join('');
  };

</script>

</head>

<body>
<table width="422" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="418">
	<form id="form1" name="form1" enctype="multipart/form-data" method="post" action="">
      <input type="file" onchange="addfile(this.value)" />  Multiple Files Selector 
	</form>
    </td>
  </tr>
  <tr>
   <td>
    <div id="fileselection"></div>
   </td>
  </tr>
</table>
</body>
</html>
Dat maakt gebruik van new Date().getTime() om elke remove een uniek getal mee te geven. :)


Vr.Gr. Egel.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan