[Noob] Van simpele bestandsformulier naar 1 afbeelding

[Hatsieflatsie]

Ik ben geen veteraan in scripts. Dus veroordeel mij niet. Al doende, leert men ,zeggen ze wel eens.

Het lijkt mij ogenschijnlijk een simpele vraag. Ik heb hier een formulier. Wanneer je op de "bestand selecteren"-knop klikt, opent er een nieuw venster (dialog window) waarin je een bestand kunt selecteren.
Vervolgens wordt dit naar de uploader.php gestuurd. Dat PHP-scriptje zet het bestand op de server die het host.

HTML:

<form enctype="multipart/form-data" action="front/uploader.php" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="10000000" />
<font>Foto's uploaden (eigen gebruik):<font> <input name="uploadedfile" type="file" /><br />
<br>
<input type="submit" value="Upload File" />

Dan verschijnt dit formulier voor je ogen:



Dit formulier wil ik veranderen naar een plaatje. Dat plaatje is hetzelfde als "bestand kiezen"-knop. Werking blijft in principe hetzelfde. Ik heb nu verschillende varianten met img-tags uitgeprobeerd en gecombineerd met dit formulier. Het gaat al mis bij het laden, of het komt nooit bij de PHP-server aan. .

Bestaan er hier alternatieven voor?

[ Voor 11% gewijzigd door Hatsieflatsie op 10-03-2013 20:42 ]

[Johnny]

Je kan de file uploader in de browser niet stijlen of je eigen events er aan koppelen. Dat is een veiligheidsfeature. Een manier om hier omheen te werken is met een Flash-component, maar dat werkt alleen als mensen de Flas-plugin geinstalleerd hebben.

[NMe]

Om het dan maar meteen uit te leggen: als jij een file upload-knopje zou kunnen stylen zou je het eruit kunnen laten zien als iets willekeurigs en een kwaadwillende programmeur verzint vast makkelijk zat iets om mensen daarmee dermate te verwarren dat hij ze op kan lichten.

[Hatsieflatsie]

Dat snap ik. Maar jullie volgen mij niet.

Ik hoef geen formulier functie omvormen naar mijn smaak. Ik wil slechts een link dat hetzelfde doet als de formulier, en de dialoogvenster opent. Dus een afbeelding, wat linkt naar een script of iets dergelijks.

Overigens is Flash toch niet noodzakelijk? Voorbeeld hiervan is: http://imageshack.us/
Daarin zit er toch ook een "browse'-knop in eigen stijl.

[ Voor 10% gewijzigd door Hatsieflatsie op 10-03-2013 22:57 ]

[bakakaizoku]

Hatsieflatsie schreef op zondag 10 maart 2013 @ 22:51:
Overigens is Flash toch niet noodzakelijk? Voorbeeld hiervan is: http://imageshack.us/
Daarin zit er toch ook een "browse'-knop in eigen stijl.

Klik eens met je rechtermuisknop op die knop

[Hatsieflatsie]

!

[ Voor 66% gewijzigd door Hatsieflatsie op 11-03-2013 01:22 ]

[NMe]

Hatsieflatsie schreef op zondag 10 maart 2013 @ 22:51:
Dat snap ik. Maar jullie volgen mij niet.

Ik hoef geen formulier functie omvormen naar mijn smaak. Ik wil slechts een link dat hetzelfde doet als de formulier, en de dialoogvenster opent. Dus een afbeelding, wat linkt naar een script of iets dergelijks.

Jij volgt ons niet. File inputs hebben interacties met je bestandssysteem en zijn het enige onderdeel van je browser dat by design uit de sandbox kan komen. Je kan dat niet stylen, onder geen beding. Je kan ze niet vervangen door een plaatje, je kan er geen onderdelen van vervangen door een plaatje en je kan geen ander element events ervoor laten afvangen. Het enige dat eventueel zou kunnen is klooien met elementen over elkaar positioneren en de visibility van de file input aan te passen, maar dat werkt niet in elke browser en vooral mobiel ziet dat er funky uit.

[Hatsieflatsie]

NMe schreef op maandag 11 maart 2013 @ 10:59:
[...]

Jij volgt ons niet. File inputs hebben interacties met je bestandssysteem en zijn het enige onderdeel van je browser dat by design uit de sandbox kan komen. Je kan dat niet stylen, onder geen beding. Je kan ze niet vervangen door een plaatje, je kan er geen onderdelen van vervangen door een plaatje en je kan geen ander element events ervoor laten afvangen.

Wanneer je in Gmail een nieuwe mail maakt, dan kun je op "bestand toevoegen als bijlage" klikken.

Zo te zien, is dat gestijld naar Gmail Layout. Helaas kon ik de code ervan niet achterhalen. Maar wat je zegt dat het niet kan, lukt met Gmail blijkbaar wel?

[TheRookie]

Je antwoord staat in het stukje van NMe's post dat je niet gequote hebt:

NMe schreef op maandag 11 maart 2013 @ 10:59:

[snip] Het enige dat eventueel zou kunnen is klooien met elementen over elkaar positioneren en de visibility van de file input aan te passen, maar dat werkt niet in elke browser en vooral mobiel ziet dat er funky uit.

Als je wil uitvogelen hoe ze dat gedaan hebben: installeer een browser addon á la firebug (lite) of de web developer toolbar en klik op inspect

[Kayshin]

http://www.quirksmode.org/dom/inputfile.html heeft een goede beschrijving van een mogelijke fix (gewoon via google gevonden btw...)

[Hatsieflatsie]

Kayshin schreef op vrijdag 15 maart 2013 @ 08:59:
http://www.quirksmode.org/dom/inputfile.html heeft een goede beschrijving van een mogelijke fix (gewoon via google gevonden btw...)

Thnx voor je aanvulling Kayshin, handig om te gebruiken. .

[NMe]

Kayshin schreef op vrijdag 15 maart 2013 @ 08:59:
http://www.quirksmode.org/dom/inputfile.html heeft een goede beschrijving van een mogelijke fix (gewoon via google gevonden btw...)

Dat is dan ook precies wat ik hierboven omschreef en waarvan ik zei dat het in veel browsers nogal "funky" uitziet. Zeker mobiel.

[ZeroXT]

PHP:

<?php
print_r($_FILES);
?>

<form action="" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="file" style="display:none;" onchange="document.forms[0].submit()" />
</form>

<a onclick="document.getElementById('file').click()">Klik mij, dit kan ook een afbeelding zijn.</a>

Getest in Firefox en Chrome. Voor de makkelijkheid even de standaard functies van Javascript gebruikt. Dit zal je zelf even moeten omzetten

[ Voor 13% gewijzigd door ZeroXT op 15-03-2013 15:47 ]

[Anoniem: 452691]

Dit is niet zo moeilijk te doen met wat CSS.. Heb dit zelf ook meerdere malen gemaakt.

Als ze (in mijn upload'script') een file selecteren verander ik d.m.v. JS/jQuery zelfs de achtergrond van de 'button' en verander ik de tekst naar de gekozen filename.

Ik moet toegeven dat het een nogal lelijke work-around is maarja.

[NMe]

Anoniem: 452691 schreef op woensdag 20 maart 2013 @ 18:39:
Dit is niet zo moeilijk te doen met wat CSS.. Heb dit zelf ook meerdere malen gemaakt.

Als ze (in mijn upload'script') een file selecteren verander ik d.m.v. JS/jQuery zelfs de achtergrond van de 'button' en verander ik de tekst naar de gekozen filename.

Ik moet toegeven dat het een nogal lelijke work-around is maarja.

En hoe precies lees je die filename uit dan? Het value-attribuut van een file-input kun je niet aanspreken en als je dat werkend hebt gekregen is het vast browser-specifiek. Sowieso kun je er volgens mij geen onchange-event aan hangen.

[RobIII]

NMe schreef op woensdag 20 maart 2013 @ 18:53:
Het value-attribuut van een file-input kun je niet aanspreken

Ja en nee...
^ Dit werkt iig in alle major recente browsers.

Het hoe en waarom (in een notedop: security): [google=fakepath].

[ Voor 45% gewijzigd door RobIII op 20-03-2013 19:12 ]

[Anoniem: 452691]

Het heeft me zelf ook redelijk wat moeite gekost...

Dit werkt voor mij:

HTML:

<div id='content' class='box'>
    <h2>Upload an image</h2>
    <form method='post' name='upload' id='uform' enctype="multipart/form-data">
        <input type='text' name='tags' id='tags' placeholder='Tags..' onFocus='this.style.color = "#ffffff" ;' style='width: 86%;' /><br/>
        
        <input type="file" id="fileElem" name='file' accept="image/*">
        <button id="fileSelect" class='bluesubmit' style='margin-top: -30px;'>Choose a picture or use your camera</button>
        
        <input type="submit" name="upload" value="Upload picture" class='graysubmit'>
    </form>
</div>

<script type='text/javascript'>
$(function() {
    $('#fileSelect').click( function(e) {
        e.preventDefault();
        $('#fileElem').trigger('click');
    });
    
    $('#fileElem').change( function() {
        $("#fileSelect").addClass('greenflash');
        $("#fileSelect").text( $(this).val().replace("C:\\fakepath\\", "") );
    });
});
</script>

Cascading Stylesheet:

input#fileElem {
    visibility: hidden;
    width: 0; height: 0;
}
.bluesubmit {
    height: 40px; width: 98%;
    background: #00b7ea;
    margin: 10px 3px;  padding: 0px 2px;
    color: #fff;
    font-weight: bold;
    text-shadow: 0px 0px 1px #fff;
    border: 1px solid #0072BA;
    border-radius: 4px;
    
    -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
    
   -webkit-transition:
    background-color .25s linear,
    border-color .25s linear;
    transition:
    background-color .25s linear,
    border-color .25s linear;
}

^ Bovenstaande werkt mobiel perfect hier. Getest op Android (HTC One V / Chrome Mobile) en iPhone 4S