[JS]Na elke onchange een nieuwe file box genereren - Softwareontwikkeling

woensdag 24 mei 2006 09:24

Acties:

Verwijderd

Topicstarter

Hallo allemaal,

Ik ben bezig met een javascript te schrijven/op zoek naar een javascript waarmee ik een nieuwe file box kan genereren zodra de huidige ingevuld is.

Maar kom er niet uit

De allereerste entry heeft een name waarde van 0. Zodra hier een bestand geselecteerd wordt moet het script een nieuwe file box genereren met de waarde 1, daarna weer een nieuwe file box met de waarde 2 and so on...

de huidige code:

HTML:

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Upload</title>
    <script language="javascript" type="text/javascript">
        function NewField()
        {
            document.write('<input name="1" type="file"'>)
        }   
    </script>
</head>

<body>
    <form enctype="multipart/form-data" method="post" action="blaat.asp">
        <input type="file" name="0" id="0" onchange="NewField();">
    </form>
</body>

</html>

Heb ook al op javascript.internet.com en javascriptkit e.d. gekeken maar kan niets vinden en zelf schrijven lukt ook niet echt...

[ Voor 39% gewijzigd door BtM909 op 24-05-2006 10:24 ]

woensdag 24 mei 2006 09:40

Acties:

André

Analytics dude

Maar je hebt nog helemaal niets? Ik zie bijvoorbeeld geen teller staan die bijhoudt welke nummer aan de beurt is. Ook mis ik een appendChild waarmee je elementen aan het DOM kunt toevoegen.

woensdag 24 mei 2006 10:15

Acties:

user109731

Dit is vrij basic JS. Ik zou het idd gewoon zo doen: maak een 'input' element (createElement), verander het type naar 'upload', stel de naam in (mogelijk een array van maken, dan hoef je geen counter bij te houden), voeg een eventhandler toe, en voeg het toe aan het form (appendChild). En klaar ben je.

En:

HTML:

1	<input type="file" name="0" id="0" onchange="NewField();">

Die id is fout

woensdag 24 mei 2006 10:48

Acties:

crisp

Devver

Pixelated

voor name-attributen is het ook zeer onverstandig om enkel een nummer te gebruiken

Intentionally left blank

woensdag 24 mei 2006 10:55

Acties:

SchizoDuckie

Kwaak

http://the-stickman.com/w...th-a-single-file-element/

Suc6

Stop uploading passwords to Github!

woensdag 24 mei 2006 11:00

Acties:

Verwijderd

Topicstarter

Oke bedankt voor de tips allemaal. Ik ben inmiddels iets verder... het enige probleem is dat de nieuwe filebox nog niet wordt weergegeven.

HTML:

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Nieuwe pagina 1</title>
    <script language="javascript" type="text/javascript">
        function NewField()
        {   
            document.getElementsByName = ('0')
            i = 0
            i++
            newUpload = document.createElement("input")
            newUpload.setAttribute("name", "i")
            newUpload.setAttribute("type", "file")
            newUpload.setAttribute("onchange", "NewField();")
            newUpload.AppendChild
        }   
    </script>
</head>

<body>
    <form enctype="multipart/form-data" method="post" action="blaat.asp">
        <input type="file" name="0" onchange="NewField();">
    </form>
</body>

</html>

[ Voor 43% gewijzigd door Verwijderd op 24-05-2006 11:01 ]

woensdag 24 mei 2006 11:08

Acties:

André

Analytics dude

Zet de i=0 buiten je functie

En verander newUpload.AppendChild in:

JavaScript:

1	document.forms["naamvanform"].appendChild(newUpload);

woensdag 24 mei 2006 11:16

Acties:

Verwijderd

Topicstarter

André schreef op woensdag 24 mei 2006 @ 11:08:
Zet de i=0 buiten je functie

En verander newUpload.AppendChild in:
JavaScript:
1
document.forms["naamvanform"].appendChild(newUpload);

Oke bedankt het werkt nu al voor het grootste deel

Hij genereert een tweede file upload box zodra ik een bestand selecteer in de eerste...maar hij genereert alleen nog geen derde zodra ik bij de tweede ene bestand selecteer..
De huidige code

HTML:

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Nieuwe pagina 1</title>
    <script language="javascript" type="text/javascript">
        i = 0
        function NewField()
        {   
            document.getElementsByName = ('0')

            i++
            newUpload = document.createElement("input")
            newUpload.setAttribute("name", "i")
            newUpload.setAttribute("type", "file")
            newUpload.setAttribute("onchange", "NewField();")
            document.forms["test"].appendChild(newUpload);
        }   
    </script>
</head>

<body>
    <form name="test" enctype="multipart/form-data" method="post" action="blaat.asp">
        <input type="file" name="0" onchange="NewField();">
    </form>
</body>

</html>

[ Voor 16% gewijzigd door Verwijderd op 24-05-2006 11:16 ]

woensdag 24 mei 2006 11:21

Acties:

André

Analytics dude

HTML:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
      <title>Nieuwe pagina 1</title>
      <script type="text/javascript">
        i = 0;
        function NewField()
        {    
          i++;
          newUpload = document.createElement("input");
          newUpload.setAttribute("name", "bestand" + i);
          newUpload.setAttribute("type", "file");
          newUpload.setAttribute("onchange", "NewField();");

          document.forms["test"].appendChild(newUpload);
        }    
    </script>
  </head>
  <body>
    <form name="test" enctype="multipart/form-data" method="post" action="blaat.asp">
      <input type="file" name="bestand0" onchange="NewField();">
    </form>
  </body>
</html>

woensdag 24 mei 2006 11:25

Acties:

Verwijderd

Topicstarter

André schreef op woensdag 24 mei 2006 @ 11:21:

HTML:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
      <title>Nieuwe pagina 1</title>
      <script type="text/javascript">
        i = 0;
        function NewField()
        {    
          i++;
          newUpload = document.createElement("input");
          newUpload.setAttribute("name", "bestand" + i);
          newUpload.setAttribute("type", "file");
          newUpload.setAttribute("onchange", "NewField();");

          document.forms["test"].appendChild(newUpload);
        }    
    </script>
  </head>
  <body>
    <form name="test" enctype="multipart/form-data" method="post" action="blaat.asp">
      <input type="file" name="bestand0" onchange="NewField();">
    </form>
  </body>
</html>

Oke bedankt, ik heb bovenstaande code net geprobeerd (de code is in iedergeval netter dan de mijne ), maar ik krijg zodra ik bij de tweede file box een bestand selecteer helaas nog steeds geen nieuwe derde filebox te zien.

woensdag 24 mei 2006 11:45

Acties:

André

Analytics dude

Ik krijg er wel 10 te zien? Heb je het 1 op 1 overgenomen?

woensdag 24 mei 2006 11:47

Acties:

Verwijderd

Topicstarter

André schreef op woensdag 24 mei 2006 @ 11:45:
Ik krijg er wel 10 te zien? Heb je het 1 op 1 overgenomen?

Hmm ik heb het net getest en het ligt aan IE, in Firefox werkt het wel, in Internet Explorer niet. Helaas gebruiken de meeste gebruikers IE dus daar zou ik het eigenlijk toch ook graag werkend in zien.

EDIT: Verder ook nog een foutje/bugje ontdekt dat als je bijvoorbeeld bij nummer 1 een nieuw bestand selecteert dat er weer een nieuwe input box gegenereergd wordt.

Maar ik zat zelf al te denken dat dit misschien opgelost kan worden door het huidige element waar de onchange nu plaats vind te veranderen naar een read-only of zoiets.

[ Voor 49% gewijzigd door Verwijderd op 24-05-2006 11:50 ]

woensdag 24 mei 2006 11:47

Acties:

Tacow

- laat maar, werkte ook niet in IE -

[ Voor 146% gewijzigd door Tacow op 24-05-2006 11:49 ]

woensdag 24 mei 2006 11:49

Acties:

djluc

Waarom wil je ze eigenlijk nummeren? als je iets hebt als name="uploads[]" krijg je toch gewoon een array binnen op je server?

woensdag 24 mei 2006 11:52

Acties:

Verwijderd

Topicstarter

djluc schreef op woensdag 24 mei 2006 @ 11:49:
Waarom wil je ze eigenlijk nummeren? als je iets hebt als name="uploads[]" krijg je toch gewoon een array binnen op je server?

De server draait geen PHP maar er wordt gebruik gemaakt van ASP en voor zover mijn ASP kennis gaat kan ASP geen geüploade arrays accepteren of kan dat wel?

woensdag 24 mei 2006 12:08

Acties:

Blue-eagle

Onchange events moet/kan je volgens mij anders afvangen voor IE, hier is een stuk code wat ik lang geleden voor een soortgelijk iets heb gebruikt, met een beetje eigen inzicht kom je er wel uit denk ik:

code:

var onChangeHandler = new Function(newFileInput.onchange);
if (newFileInput.addEventListener) {
    newFileInput.addEventListener('change', setUploadForms, false );
} else if (newFileInput.attachEvent) {
    newFileInput.attachEvent('onchange', setUploadForms);
}

woensdag 24 mei 2006 12:13

Acties:

Verwijderd

Topicstarter

Blue-eagle schreef op woensdag 24 mei 2006 @ 12:08:
Onchange events moet/kan je volgens mij anders afvangen voor IE, hier is een stuk code wat ik lang geleden voor een soortgelijk iets heb gebruikt, met een beetje eigen inzicht kom je er wel uit denk ik:
code:
1
2
3
4
5
6
var onChangeHandler = new Function(newFileInput.onchange);
if (newFileInput.addEventListener) {
    newFileInput.addEventListener('change', setUploadForms, false );
} else if (newFileInput.attachEvent) {
    newFileInput.attachEvent('onchange', setUploadForms);
}

Oke hartstikke bedankt

Ik heb hem werkend...Het enige domme is dat deze code dus alleen weer in IE werkt en niet in Firefox....dat kromme k*t IE ook altijd, naja dan moet ik maar een browser detectie javascriptje maken en op basis daarvan naar een pagina gaan... nogmaals bedankt allemaal!

HTML:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
      <title>Nieuwe pagina 1</title>
      <script type="text/javascript">
        i = 0;
        function NewField()
        {    
          i++;
          newUpload = document.createElement("input");
          nextLine = document.createElement("br");
          newUpload.setAttribute("name", "bestand" + i);
          newUpload.setAttribute("type", "file");
          newUpload.attachEvent('onchange', NewField);
          document.forms["test"].appendChild(nextLine);     
          document.forms["test"].appendChild(newUpload);
        }    
    </script>
  </head>
  <body>
    <form name="test" enctype="multipart/form-data" method="post" action="blaat.asp">
      <input type="file" name="bestand0" onchange="NewField();">
    </form>
  </body>
</html>

[ Voor 55% gewijzigd door Verwijderd op 24-05-2006 12:14 ]

woensdag 24 mei 2006 20:46

Acties:

user109731

Waarom niet gewoon zoiets:

JavaScript:

var i = 0;
function NewField()
{
    i++;
    var input = document.createElement('input');
    input.type = 'file';
    input.name = 'bestand'+i;
    input.onchange = NewField;
    document.forms[0].appendChild(input);
}

edit:

dat kromme k*t IE ook altijd, naja dan moet ik maar een browser detectie javascriptje maken en op basis daarvan naar een pagina gaan...

Bovenstaande code werkt iig in opera, IE en firefox

[ Voor 39% gewijzigd door user109731 op 24-05-2006 20:49 ]

woensdag 24 mei 2006 21:56

Acties:

crisp

Devver

Pixelated

Blue-eagle schreef op woensdag 24 mei 2006 @ 12:08:
Onchange events moet/kan je volgens mij anders afvangen voor IE, hier is een stuk code wat ik lang geleden voor een soortgelijk iets heb gebruikt, met een beetje eigen inzicht kom je er wel uit denk ik:
code:
1
2
3
4
5
6
var onChangeHandler = new Function(newFileInput.onchange);
if (newFileInput.addEventListener) {
    newFileInput.addEventListener('change', setUploadForms, false );
} else if (newFileInput.attachEvent) {
    newFileInput.attachEvent('onchange', setUploadForms);
}

Don't ever ever ever ever use attachEvent; dat eventmodel is het meest brakke dat MS ooit geproduceerd heeft aan propriety zut in IE. Gebruik liever gewoon het DOM level 0 event model:

JavaScript:

1	element.event = handler;

en als je echt meerdere handlers aan hetzelfde event wilt kunnen toekennen gebruik dan een echte oplossing

Intentionally left blank

woensdag 24 mei 2006 22:37

Acties:

Blue-eagle

Hmm, for educational purposes - wat is daar brak aan? Ik geloof je wel met dit soort dingen hoor, maar da's de eerste keer dat ik daar van hoor

Then again.. d'r is vast een reden waarom juist die code ge-comment was in het bestand waar ik het uit heb gepaste

woensdag 24 mei 2006 23:17

Acties:

user109731

Blue-eagle schreef op woensdag 24 mei 2006 @ 22:37:
Hmm, for educational purposes - wat is daar brak aan? Ik geloof je wel met dit soort dingen hoor, maar da's de eerste keer dat ik daar van hoor

Je functie word dan in de global scope uitgevoerd, je kunt dus niet met 'this' naar het element verwijzen waar de handler 'aanhangt'.

[ Voor 39% gewijzigd door user109731 op 24-05-2006 23:22 . Reden: verduidelijking ]

woensdag 24 mei 2006 23:35

Acties:

crisp

Devver

Pixelated

Blue-eagle schreef op woensdag 24 mei 2006 @ 22:37:
Hmm, for educational purposes - wat is daar brak aan? Ik geloof je wel met dit soort dingen hoor, maar da's de eerste keer dat ik daar van hoor Then again.. d'r is vast een reden waarom juist die code ge-comment was in het bestand waar ik het uit heb gepaste

Het IE eventmodel heeft een aantal enorme bugs en tekortkomingen:
1) de handler wordt niet uitgevoerd in de scope van het object waar het betrekking op heeft, in other words: 'this' binnen je handler verwijst naar de global scope (window) in plaats van het element dat de handler triggerde. event.srcElement (IE's equivalent van de target property van het event object) wijst naar het element dat initieel het event afvuurde, niet noodzakelijk naar het element dat de handler gedefinieerd heeft - dat is een serieus probleem als het event bubbled.
2) IE's model staat het toe dezelfde handler meerdere keren toe te kennen aan hetzelfde event op hetzelfde object. detachEvent zal enkel de laatst toegekende handler verwijderen. Dat plus het feit dat er geen enkele mogelijkheid is om te controleren of een bepaalde handler al toegekent is kan tot onvoorspelbare resultaten leiden.
3) IE's model ondersteund geen capturing

all in all is attachEvent dus absoluut geen equivalent van addEventListener; je kan en mag het dus ook niet zo behandelen.

[ Voor 5% gewijzigd door crisp op 24-05-2006 23:37 ]

Intentionally left blank

dinsdag 30 mei 2006 10:14

Acties:

Verwijderd

Topicstarter

Oke bedankt allemaal, ik heb het script nu volledig werkend...alleen nog 1 klein vraagje. Hij genereert de nieuwe file select box helemaal onderaan de pagina (want de pagina is af

), terwijl ik wil dat hij deze direct onder de huidige file input box genereert. Is dit toevallig ook mogelijk?

dinsdag 30 mei 2006 10:23

Acties:

user109731

Verwijderd schreef op dinsdag 30 mei 2006 @ 10:14:
Oke bedankt allemaal, ik heb het script nu volledig werkend...alleen nog 1 klein vraagje. Hij genereert de nieuwe file select box helemaal onderaan de pagina (want de pagina is af ), terwijl ik wil dat hij deze direct onder de huidige file input box genereert. Is dit toevallig ook mogelijk?

Ik weet niet wat voor code je nu gebruikt? Als je form.appendChild() gebruikt zal je upload control als laatste in het form komen, dit kun je oplossen door insertBefore() ofzo te gebruiken

.

edit: maar de oplossing hieronder is nog beter

[ Voor 5% gewijzigd door user109731 op 30-05-2006 10:40 ]

dinsdag 30 mei 2006 10:26

Acties:

eghie

Spoken words!

daar hebben we dus die appendChild() voor. Nu zeg je document.forms[0].appendChild(), maar je zou ze bijvoorbeeld ook in een divje kunnen gooien. Stel je divje heeft de id uploadboxes, dan gebruik je de volgende code:

JavaScript:

1	document.getElementById('uploadboxes').appendChild(jeInputObject);

dinsdag 30 mei 2006 10:38

Acties:

Verwijderd

Topicstarter

eghie schreef op dinsdag 30 mei 2006 @ 10:26:
daar hebben we dus die appendChild() voor. Nu zeg je document.forms[0].appendChild(), maar je zou ze bijvoorbeeld ook in een divje kunnen gooien. Stel je divje heeft de id uploadboxes, dan gebruik je de volgende code:
JavaScript:
1
document.getElementById('uploadboxes').appendChild(jeInputObject);

Oke thanks again, werkt perfect

Probleem volledig opgelost