[PHP/JS] Waarde INPUT Type="file" weergeven

dinsdag 5 juli 2005 13:25

Acties:

0 Henk 'm!

Topicstarter

Zit met een probleem en grijp naar mijn laatste redding, jullie

Ik heb een webpagina waar ik een invoerveld heb (van het type 'file'). Ik wil via een formulier twee zaken kunnen doen.
1. Submit (file upload)
2. Preview

Op het moment dat je een form van het 'enctype="multipart/form-data"' type submit, wordt het bestand geupload. Dit is niet de bedoeling, dus de preview heb ik niet ondergebracht onder een submit button, maar een gewone button:

HTML

code:

<FORM METHOD="POST" NAME="form_upload ACTION="huidigbestand.php" enctype="multipart/form-data">
<INPUT TYPE="file" NAME="upload_file" value=""><BR>
<INPUT TYPE="button" VALUE="Preview" ONCLICK="preview()">
<INPUT TYPE="submit" VALUE="Upload">
</FORM>

JAVASCRIPT

code:

<SCRIPT language="JavaScript">
function preview()
{
    var formpje = this.document.form_upload;
    document.write(formpje.upload_file.value);       
}
</SCRIPT>

Zoals je ziet wil ik gewoon de bestandsnaam (met path) afdrukken. Wat ik ook doe, ik krijg de fout:

Fout: 'upload_file' is leeg of geen object.

Ik heb het aanroepen van upload_file ook geprobeerd met document.getElementById(), zelfde probleem.

Even voor de duidelijkheid, misschien dat jullie zelf gewoon de file zouden uploaden en dan pas (met $_FILE) een preview uitvoeren, maar omdat het hier om grote (avi) bestanden gaat, gaat dit niet op.
Ik ben dus uiteindelijk van plan om in het Javascript, in een nieuw venster, de preview weer te geven, maar dan moet ik wel de waarde uit het formulier kunnen gebruiken.

Bedankt voor je eventuele reactie.

Lightning_crew

dinsdag 5 juli 2005 13:30

Acties:

0 Henk 'm!

Verwijderd

De variabele bestaat niet want het form is niet gesubmit. Je zult toch een submit moeten doen met de waarde in je upload-variabele.

dinsdag 5 juli 2005 13:30

Acties:

0 Henk 'm!

CH4OS

It's a kind of magic

Wil je het alleen met javascript doen? Of mogen er ook talen als PHP e.d. aan de pas komen?
Eigenlijk is het heel makkelijk te doen...
Je maakt dan gewoon een extra pagina, die de preview geeft...
Met daarop een knopje voor opslaan...

[ Voor 26% gewijzigd door CH4OS op 05-07-2005 13:31 ]

dinsdag 5 juli 2005 13:33

Acties:

0 Henk 'm!

_soh

Topicstarter

Verwijderd schreef op dinsdag 05 juli 2005 @ 13:30:
De variabele bestaat niet want het form is niet gesubmit. Je zult toch een submit moeten doen met de waarde in je upload-variabele.

Submit betekent uploaden. Gezien het bestandsformaten lijkt me dat niet verstandig.

GJ-tje schreef op dinsdag 05 juli 2005 @ 13:30:
Wil je het alleen met javascript doen? Of mogen er ook talen als PHP e.d. aan de pas komen?
Eigenlijk is het heel makkelijk te doen...
Je maakt dan gewoon een extra pagina, die de preview geeft...
Met daarop een knopje voor opslaan...

Mag ook in PHP, graag zelfs. Maar wat jij zegt blijkt dus niet helemaal te werken. Dit komt omdat je de value van een FILE input niet mag setten ivm beveiligingsaspecten. Dus op deze 'tweede' pagina, zou de gebruiker wederom moeten browsen naar het bestand.

[ Voor 23% gewijzigd door _soh op 05-07-2005 13:37 ]

Lightning_crew

dinsdag 5 juli 2005 13:36

Acties:

0 Henk 'm!

Osiris

Houd je er überhaupt wel rekening mee dat je slechts een beperkte filesize kunt uploaden naar PHP toe? (in te stellen in je php.ini enzo)

En uit de Javascript console:

code:

1
2
3

Error: formpje has no properties
Source File: file:///home/user/tmp/form.html
Line: 5

Voila met getElementById:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<TITLE>Testje</TITLE>
<SCRIPT TYPE="text/javascript">
function preview()
{
    document.write(document.getElementById('upload_file').value);       
}
</SCRIPT>
<FORM METHOD="POST" NAME="form_upload" ACTION="huidigbestand.php" enctype="multipart/form-data">
<P>
<INPUT TYPE="file" ID="upload_file" NAME="upload_file"><BR>
<INPUT TYPE="button" VALUE="Preview" ONCLICK="preview()">
<INPUT TYPE="submit" VALUE="Upload">
</P>
</FORM>

Meteen ff die language-attribuut weggehaald en de type-attribuut toegevoegd

En nu volledig HTML 4.01 Strict

[ Voor 73% gewijzigd door Osiris op 05-07-2005 13:44 ]

dinsdag 5 juli 2005 13:39

Acties:

0 Henk 'm!

_soh

Topicstarter

Osiris schreef op dinsdag 05 juli 2005 @ 13:36:
Houd je er überhaupt wel rekening mee dat je slechts een beperkte filesize kunt uploaden naar PHP toe? (in te stellen in je php.ini enzo)

php.ini is in eigen beheer, dus geen probleem.

Lightning_crew

dinsdag 5 juli 2005 13:40

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

In Javascript kun je geen geuploade files weergeven, want je hebt nog niets geupload. Op de eigen pc kun je niets afspelen, want dat zou een potentieel beveiligingslek zijn. In PHP kun je niets previewen, want je kan er in PHP pas aan als je file compleet geupload is, waardoor het geen preview meer is.

Lijkt me dus onmogelijk wat je wil.

[ Voor 15% gewijzigd door NMe op 05-07-2005 13:40 ]

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

dinsdag 5 juli 2005 13:43

Acties:

0 Henk 'm!

_soh

Topicstarter

Wauw, bedankt!

zelf had'k ook getElement geprobeerd, maar ik zie idd dat ik daar een foutje in had gemaakt (vergeten .value er achter te zetten). Toen kreeg ik als output 'Undefined'

Maar goed, probleem opgelost en nogmaals bedankt!

Lightning_crew

dinsdag 5 juli 2005 13:48

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Je kunt toch gewoon de inhoud van de file-input naar een iframe sturen? Volgens mij krijg je dan (afhankelijk van de browser) gewoon die file te zien. Uiteraard is die nog niet geupload, maar is wel handig voor een preview voor het uploaden.

dinsdag 5 juli 2005 13:48

Acties:

0 Henk 'm!

_soh

Topicstarter

-NMe- schreef op dinsdag 05 juli 2005 @ 13:40:
In Javascript kun je geen geuploade files weergeven, want je hebt nog niets geupload. Op de eigen pc kun je niets afspelen, want dat zou een potentieel beveiligingslek zijn. In PHP kun je niets previewen, want je kan er in PHP pas aan als je file compleet geupload is, waardoor het geen preview meer is.
Lijkt me dus onmogelijk wat je wil.

hehe klopt, maar!

Ik wil in javascript ook geen geuploade files weergeven, slechts lokaal! Dus m'n Javascript gaat een HTML script schrijven welke dit doet, waarin het path uit het form komt.
Of dit wegschrijven nu in in Javascript, of in PHP gebeurd maakt mij niet uit. Dat bedoelde ik te zeggen. Maar omdat je met PHP niet een ongesubmitte form kan bereiken, moet dit dus in Javascript, wat nu gelukt is.

Lightning_crew

dinsdag 5 juli 2005 13:50

Acties:

0 Henk 'm!

_soh

Topicstarter

Bosmonster schreef op dinsdag 05 juli 2005 @ 13:48:
Je kunt toch gewoon de inhoud van de file-input naar een iframe sturen? Volgens mij krijg je dan (afhankelijk van de browser) gewoon die file te zien. Uiteraard is die nog niet geupload, maar is wel handig voor een preview voor het uploaden.

sturen = submit he, dus dan ben je al (gaat vanzelf) aan het uploaden.

Lightning_crew

dinsdag 5 juli 2005 13:50

Acties:

0 Henk 'm!

bigbeng

Je kunt het anders proberen zoals Hotmail het doet met attachments.
Dus men geeft aan bij een mailtje attachments te willen uploaden (druk op knop, apart scherm).
Hier regel je de uploads van de bestanden naar een tijdelijke folder. De namen van deze bestanden onthoudt je en plaats je na wederom een druk op de knop in het oorspronkelijke formulier (hidden fields lijkt me hier een oplossing).
Bij een druk op preview laat je nu het tijdelijke bestand zien.

Tenslotte drukt de gebruiker op Save, je verplaatst de bestanden van de temporary folder naar de juiste bestemming.

Het enige wat je verder dus nog moet doen is een opruimscriptje schrijven die om wat voor reden dan ook niet opgeslagen zaken verwijderd (bijvoorbeeld alles ouder dan een dag ofzo).

dinsdag 5 juli 2005 14:05

Acties:

0 Henk 'm!

Bosmonster

*zucht*

_soh schreef op dinsdag 05 juli 2005 @ 13:50:
[...]

sturen = submit he, dus dan ben je al (gaat vanzelf) aan het uploaden.

nee sturen is even met een regel javascript uitlezen...

code:

1	<input type="button" value="preview" onclick="document.frames['ifreempje'].location.href=this.form.fileding.value">

bijvoorbeeld

[ Voor 27% gewijzigd door Bosmonster op 05-07-2005 14:07 ]

dinsdag 5 juli 2005 14:19

Acties:

0 Henk 'm!

Parcye

Mr C

En dan kan je ook nog de 'onChange' gebruiken van je input file veld. Ik gebruik dit ook voor mijn fotoalbum script, zodat ik zelf kan bepalen waar op de foto ik mijn logo neer wil zetten voordat ik en upload doe.

"Als je het kan bedenken, kan het gemaakt worden" Parcye - 14 januari 2002

dinsdag 5 juli 2005 15:11

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Parcye schreef op dinsdag 05 juli 2005 @ 14:19:
En dan kan je ook nog de 'onChange' gebruiken van je input file veld. Ik gebruik dit ook voor mijn fotoalbum script, zodat ik zelf kan bepalen waar op de foto ik mijn logo neer wil zetten voordat ik en upload doe.

onchange kan beveiligingsproblemen opleveren op een file input. Elk event op de file input kan wat dat betreft beveiligingsproblemen opleveren (met bepaalde settings/browsers).

Pagina: 1

Reageer

Onderwerpen