File upload icm met uniform.js

Door Goeny Goegoe op 26-01-2014 11:32

1.560 views

Goedemorgen,

Ik wil een file upload maken in een simpele html form.
Deze form wordt echter gestyled m.b.v. uniform.js

Door gebruik van uniform.js wordt een simpele <input class="input-file uniform_on" id="fileInput" type="file" /> omgezet naar het volgende.

<input class="input-file uniform_on" id="fileInput" type="file">
<span class="filename" style="-webkit-user-select: none;">No file selected</span>
<span class="action" style="-webkit-user-select: none;">Choose File</span>

Als ik nu een file selecteer veranderd het naar:

<input class="input-file uniform_on" id="fileInput" type="file">
<span class="filename" style="-webkit-user-select: none;">bestandsnaam.ext</span>
<span class="action" style="-webkit-user-select: none;">Choose File</span>

Zoals je kunt zien, wordt er bij het selecteren geen value gegeven aan de file input maar wordt de bestandsnaam welke geselecteerd is in een <span> tag gezet.

Als ik nu dus een bestand wil uploaden wordt de file input als "leeg" gezien.

Hoe kan ik nu, met behulp van deze methode van styling, toch een bestand uploaden? Hoe krijg ik het aangeroepen bestand in mijn uploader script?

bij voorbaat dank.

- SanThe -

26-01-2014 15:22 gewijzigd op 26-01-2014 15:23

Bij een input type="file" zie je de value niet zomaar.
Wat ik in bovenstaand mis is name="..."

Goeny Goegoe

26-01-2014 15:32

Er is imo vrij slechte documentatie en support voor uniform.js
(Het is natuurlijk ook opensource dus kan niet alles voor niks krijgen)

Ik had zelf ook wel al bedacht dat ik name="" moest gebruiken. Maar dir maakt helaas niks uit voor mijn probleem.

Dit is een stukje uit de code die ik momenteel gebruik, nadat ik een bestand heb geselecteerd.

<div class="uploader" id="uniform-siteImg">
<input class="input-small focused" id="siteImg" name="siteImg" type="file" value=""><span class="filename" style="-webkit-user-select: none;">bg7.jpg</span>
<span class="action" style="-webkit-user-select: none;">Kies bestand</span>
</div>

Zoals je ziet, ook hier geen value in de file input.

- SanThe -

26-01-2014 15:48

- SanThe - op 26/01/2014 15:22:52

Bij een input type="file" zie je de value niet zomaar.

Goeny Goegoe

26-01-2014 16:09

Het is natuurlijk niet zo dat ik zomaar er van uit ga dat het niet werkt omdat ik geen value ZIE...

Er IS ook gewoon geen value.
Even snel het volgende uitgevoerd om het, voor dit topic, zeker te weten.

<?php
if (isset($_FILES['siteImg'])){
move_uploaded_file($_FILES['siteImg']['tmp_name'], 'uploads/'.$_FILES['siteImg']['name']);
}
else{
echo 'Geen bestand geselecteerd';
}
?>

En natuurlijk komt er terug: "Geen bestand geselecteerd"

- SanThe -

26-01-2014 16:20

print_r($_FILES);

Goeny Goegoe

26-01-2014 16:52

Array ( )

- SanThe -

26-01-2014 17:00

Staat enctype wel in <form>?

Goeny Goegoe

26-01-2014 18:22

Stom stom stom...
Bedankt SanThe!

Omdat ik uniform.js ff snel wilde testen in een form had ik alleen <form action="bladiebla"> aangemaakt.
Nadat uniform.js wel prima werkte heb ik die form gewoon gekopieerd naar mijn projectje.

Opgelost! Dus bedankt!

Reageren

Inloggen om te reageren