Tonen van filename

Door Jorn Reed op 23-10-2020 20:22

1.916 views

Hallo iedereen. Je kent de situatie wel, je hebt een update formulier voor BIJVOORBEELD een Post.
In het desbetreffende bestand haal ik dan het juist Post object op aan de hand van het id uit de url en toon ik de waades dus bijvoorbeeld `title, content, publish_date` in de values van de inputs. Dus dat je de huidige waardes ziet om die te kunnen bewerken. Stel een Post heeft een Afbeelding/Bestand wat er bij zit, hoe toon ik dan met php/js makkelijk de huidige bestand/foto naam?

Als er onduidelijkheden zijn in mijn verhaal/vraag, hoor ik het graag :)

- Ariën -

23-10-2020 20:30 gewijzigd op 23-10-2020 20:30

Ik raad zelf aan om de naam aan te passen en het bestand dus te hernoemen. Maar voor metadata kan je het altijd opslaan.

$_FILES['filebox']['name'] bevat de naam.

J Jorn Reed

24-10-2020 15:36

Oh oke. Maar stel ik heb het update formulier. Met bijvoorbeeld `<input type="text" name="title" value="<?=$post['title'];?>">` dat kan ik niet met files doen zoals dit `<input type="file" name="file" value="<?=$post['file'];?>">` toch? Volgens mij kan je dan gewoon het beste een paragraag boven de file input maken en daarin de huidige bestandsnaam inladen, zodat de gebruiker weet dat bijv pietjepuck.zip word vervangen door wat de gebruiker nu upload?

- Ariën -

24-10-2020 16:09

Je wilt gebruikers zelf een bestandsnaam aan laten geven?

J Jorn Reed

24-10-2020 18:37

Nee haha. In het update formulier voor een specifieke post, wil ik gewoon dat de gebruiker een voorbeeld ziet van de huidig geuploadde afbeelding (dus van toen de post werd aangemaakt). Zodat hij/zij weet van oh oke deze foto overschrijf ik.

- Ariën -

24-10-2020 19:30 gewijzigd op 24-10-2020 19:34

Het pad van de geüploadde foto kan je toch gewoon uit de database trekken?
Zo'n rocketscience is het ook weer niet.

Als je de afbeelding die je wilt uploaden vooraf al (voor je POST) wilt tonen, dan kan je de JavaScript FileReader API gebruiken:


<input type='file' onchange="readImage(this);" />
    <img id="afbeelding" src="#" alt="Jouw afbeelding" />


     function readImage(input) {
            if (input.files && input.files[0]) {
                var read = new FileReader();
                read.onload = function (e) {
                    $('#afbeelding')
                        .attr('src', e.target.result)
                        .width(150)
                        .height(200);
                };

                read.readAsDataURL(input.files[0]);
            }
        }

Reageren

Inloggen om te reageren