CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

tobrukDk Novice

23. september 2012 - 00:03 Der er 17 kommentarer og
1 løsning

Er der en file upload - infomation box til bruger

Hej med jer

det er sådan jeg har tænkt mig at gøre det, at du har skrevet eller tilføje en fil, før det vil blive uploadet. gerne her;

function check(){
var elm = document.getElementById("hello-world");
if (elm.value.length>0){
alert("Hey");
return true;
}
else{
alert("Nooooo!");
return false;
}
}

Så jeg ville virkelig have mig til at få gjort det er sådan næsten det sammen, ligesom kontrollen på op på, om der er noget i filen / at uploade et billede. men hvis det er sådan, at der ikke er et billede, men bare klikke upload uden et billede på alle.

Det er hvad min html ud for, når du ønsker at uploade til galleriet i databasen, eller hvad jeg kalder det her.

så ville gerne have bygget nogle javascript på, således at der vil tjekke op på om du har upload en fil eller ej .. men du er velkommen til at spørge mig, hvis der er noget du ønsker at vide :)

Håber du kan se hvad jeg mener ellers spørg mig!

Synes godt om

olsensweb.dk Ekspert

23. september 2012 - 14:56 #1

hvor ligger dit id der hedder "hello-world" ??

dette skulle virke

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    </style>
    <script type="text/javascript">
    function check(){
        var elm = document.getElementById("filename");
        if (elm.value.length>0){
            alert("du har valgt en fil");
            return true;
        }
        else{
            alert("du har IKKE valgt en fil");
            return false;
        }
    }
    </script>
</head>
<body>
<div class="opslag-indhold">
    <form name="opslag" method="post" action="#">
        <input type="file" name="filename" [b]id="filename"[b] >
        <input type="submit" name="opslag" value="Upload" id="del" onclick="return check()">
    </form>
</div>
</body>
</html>

skal der også kontrol på type ??
så kig på "input accept type file"

http://stackoverflow.com/questions/3828554/how-to-allow-input-type-file-to-accept-only-image-files
http://www.javascriptsource.com/forms/upload-filter.html

Synes godt om

olsensweb.dk Ekspert

23. september 2012 - 15:01 #2

og så glemte jeg igen at lukke mit b tag, demo lavet så du nemt kan kopiere det
demo'en http://experten.olsensweb.dk/969367/

Synes godt om

tobrukDk Novice

23. september 2012 - 15:08 #3

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
<script type="text/javascript">
function check(){
var elm = document.getElementById("filename");
if (elm.value.length>0){
alert("du har valgt en fil");
return true;
}
else{
alert("du har IKKE valgt en fil");
return false;
}
}
</script>
</head>
<body>
<div class="opslag-indhold">
<form name="opslag" method="post" action="#">
<input type="file" name="filename" id="filename" accept="image/x-png, image/gif, image/jpeg" />
<input type="submit" name="opslag" value="Upload" id="del" onclick="return check()">
</form>
</div>
</body>
</html>

som jeg viser i file ting ting , hvad man nu kalder den der,. så vil den kun tag i mode png og gif og jpeg? er det rigtigt forstå ?

http://stackoverflow.com/questions/3828554/how-to-allow-input-type-file-to-accept-only-image-files

Men som de også skriver virker det kun i Chrome og ikke IE9 og ligne

Lyder meget dejligt og tak for du vil hjælp mig med js igen! :) Håber du få en god dag?

Synes godt om

olsensweb.dk Ekspert

23. september 2012 - 15:23 #4

kunne også bruge accept="image/*" så vil den accepterer alle image formater
og ja kun understøttet i FF, opera, Crome, jf http://www.w3schools.com/tags/att_input_accept.asp, men de har jo før vist sig at være misinformerende

Synes godt om

tobrukDk Novice

23. september 2012 - 15:41 #5

så sådan her

Synes godt om

tobrukDk Novice

23. september 2012 - 15:43 #6

Ret det lige...

Synes godt om

olebole Juniormester

23. september 2012 - 18:22 #7

<ole>

Du kan også noget i denne stil:

/mvh
</bole>

Synes godt om

tobrukDk Novice

23. september 2012 - 21:55 #8

Hej

Kan du forklare hvad den gøre ??

Er det for at understøtte alle browser?

Men kan jeg ikke bygge bygge samme i en ??

Synes godt om

olsensweb.dk Ekspert

23. september 2012 - 23:51 #9

Ole's function tester når du vælger en fil, og hvis det ikke er en af de godkendte extensions får du en alert.
den function jeg lavede tester kun når du trykker submit, og det kun om feltet er tomt eller ej, ikke på filtype, (sikre at man ikke trykker submit uden at vælge), så ingen af functionerne kan stå alene

>Men kan jeg ikke bygge bygge samme i en ??
en rettet vertion med de 2 functioner, du skal nok fjerne nogle af de alert :)
demo opdateret
>Er det for at understøtte alle browser?
tested i IE9 og FF15

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    </style>
    <script type="text/javascript">
    var oAllowedExts = {
        "png": 1,
        "gif": 1,
        "jpg": 1,
        "jpeg": 1
    };
    function checkFileExt(elm) {
        var sExt = elm.value.split(".").pop().toLowerCase();
        if (!oAllowedExts[sExt]) {
            alert("Du skal vælge et billede");
            return false;
        }
        return true;
    }    
    function check(){
        var elm = document.getElementById("filename");
        if (elm.value.length>0){
            alert("du har valgt en fil"); // bør slettes
            var status = checkFileExt(elm);                
            if(status===false){
                alert("den valgte fil er IKKE et billed"); // bør slettes
                return false;
            }
            else{
                alert("den valgte fil er et billed"); // bør slettes
                return true;
            }            
        }
        else{            
            alert("du har IKKE valgt en fil");
            return false;
        }
    }    
    </script>
</head>
<body>
<div class="opslag-indhold">
    <form name="opslag" method="post" action="#">
        <input type="file" name="filename" id="filename" onchange="checkFileExt(this)">        
        <input name="opslag" value="Upload" id="del" onclick="return check()" type="submit">
    </form>
</div>
</body></html>

Synes godt om

tobrukDk Novice

24. september 2012 - 00:12 #10

Åhhh Lækkert og tak for hjælp!, Det kan også være at jeg skulle bruge det til når man skal opret bruger :)

Lige et svar som tak for hjælpen!

Synes godt om

olsensweb.dk Ekspert

24. september 2012 - 19:16 #11

får du her

Synes godt om

tobrukDk Novice

24. september 2012 - 19:29 #12

Jeg ved at olebole ikke gider at have nogle overhovedet!

Synes godt om

olebole Juniormester

24. september 2012 - 19:54 #13

Ups, jeg har da vist ikke fået mail om denne tråd =)

var sExt = elm.value.split(".").pop().toLowerCase();

- er det samme som:

// Del strengen op i et array:
var array_Fil_Navn_Dele = elm.value.split(".");

/* Nu ser array'et f.eks. sådan ud:
array_Fil_Navn_Dele = [
"file:\\\C:\sti\til\billede",
"JPG"
]
*/

// Tag det sidste element i array'et:
var string_Extension = array_Fil_Navn_Dele.pop();

// Sørg for den er skrevet med små bogstaver:
var sExt = string_Extension.toLowerCase();

Hvis sExt ikke findes i oAllowedExts, smider vi en besked til brugeren.

Du bør dog også tjekke filens extension på serveren *o)

Synes godt om

tobrukDk Novice

24. september 2012 - 20:03 #14

den anden som der er blevet skrevet tidlig virker fint ;) men komme lige i tænke om på hvordan sætter jeg sådan et max på hvor stor file må være. ;)

Synes godt om

olebole Juniormester

24. september 2012 - 20:38 #15

Du kan bruge denne:

- men det er stadig 'kun' frontend kode, som kan ændres af brugeren. Vil du være sikker, skal du også tjekke på serveren =)

Synes godt om

tobrukDk Novice

25. september 2012 - 00:05 #16

Så det vil sige at bruger kan bare ret om på det så han/hun kan ligge et store billede ind på siden?

Synes godt om

olebole Juniormester

25. september 2012 - 00:19 #17

Brugeren kan altid ændre på HTML-koden med lidt JavaScript i adresselinjen - eller man kan bruge et script, som efterligner din form.

Du skal altid tjekke al bruger input på serveren

Synes godt om

tobrukDk Novice

25. september 2012 - 23:23 #18

okay super, det vil jeg gøre og ligne ,)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS