php - Upload til server - Udvikleren.dk - Programmering, webdesign og grafik

Tags: php mysql bootstrap

Bruger #21084 @ 13.03.15 18:59

Hej

Jeg har en upload funktion af billeder til en mappe på en server i et lille lukket forum.
Til at begynde med brugte jeg med succes følgende :

<form action="ForumTest.php" enctype="multipart/form-data" method="post">
<input name="uploadedimage" type="file">

<input name="Upload Now" type="submit" value="Upload Image">
</form>

Efterfølgende ændrede jeg designet på siden og begyndte at bruge bootstrap. Jeg fandt en fil upload funktion med noget preview af billede inden upload.

Men jeg kan simpelthen ikke få det til at virke. Nogen der kan se hvad der er forkert eller mangler i koden?

<form class="form-inline" action="ForumTest.php" method="get">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
<div>
<span class="btn btn-primary btn-file"><span class="fileinput-new">Vælg billede</span><span class="fileinput-exists">Skift</span><input type="file" name="uploadedimage"></span>
<a href="#" class="btn btn-primary fileinput-exists" data-dismiss="fileinput">Slet</a>

<button type="submit" class="btn btn-primary">Upload billede</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Luk</button>

</form>

Indlæg senest redigeret d. 13.03.2015 19:03 af Bruger #21084

5 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma

Sorter efter stemmer Sorter efter dato

Bruger #17081 @ 13.03.15 20:24

1.258

Hvis der skal noget preview på. Så mangler der noget javascript

Bruger #16075 @ 13.03.15 22:07

1.223

denne linje ser da ikke rigtig ud
<form class="form-inline" action="ForumTest.php" method="get">

det skal da ikke være get, og det skal da enctype="multipart/form-data"

jeg tror linjen skal se sådan ud
<form class="form-inline" action="ForumTest.php" enctype="multipart/form-data" method="post">

og som Dan skriver mangler der noget JS til preview

>Jeg fandt en fil upload funktion med noget preview af billede inden upload.
hvor ?? kom med et link

Bruger #21084 @ 13.03.15 22:29

Her er linket til hvor jeg hentede funktionen.

http://jasny.github.io/bootstrap/javascript/

Nederst på siden under image upload widgets

Selve previewet virker. Jeg kan fint se billedet jeg har valgt. Men min submit knap virker ikke, så billedet bliver ikke uploaded til servermappen.

Mvh Thomas

Bruger #16075 @ 14.03.15 01:48

1.223

jeg har taget deres code og smidt upload på, og bare for sjov lavet sql sætningen
kig på den og lad dig inspirarer, den er meget skrapet og mangler en masse check, og sikkerhed.
på filupload delen bør du sikre at existerende fil navn ikke overskrives, ved feks at lave fil navnet unique
på sql delen bør du som minimum rense input, og du bør anvende Prepare Statement eller ORM, disse kræver dog du anvender mysqli eller PDO, hvile jeg antager du gør

ForumTest.php

Kode

<?php
if (isset($_POST["submit"])) {
    $target_dir = "uploads/";
    $file_name = $_FILES["img_file"]["name"];
    $target_file = $target_dir . $file_name;
    if (move_uploaded_file($_FILES["img_file"]["tmp_name"], $target_file)) {
        $sql = "INSERT INTO tbl_img (name) VALUES ('$file_name') ";
        echo "The file " . $file_name . " has been uploaded.<br>";
        echo $sql;
    } else {
        echo "Sorry, there was an error uploading your file.";
    }
// print_r($_FILES);
}
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="bootstrap.min.css" />
        <link rel="stylesheet" href="jasny-bootstrap.min.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript" src="bootstrap.min.js"></script> 
        <script type="text/javascript" src="jasny-bootstrap.min.js"></script>
        <style type="text/css">
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
                $('.fileinput').fileinput()
            });
        </script>
    </head>
    <body>
        <form class="form-inline" action="ForumTest.php" enctype="multipart/form-data" method="post">


            <div class="fileinput fileinput-new" data-provides="fileinput">
                <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
                <div>
                    <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="img_file"></span>
                    <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
                </div>
            </div>

            <input type="submit" name="submit">
        </form>

    </body>
</html>

de anvendte js og css filer finder du
http://jasny.github.io/bootstrap/javascript/

Indlæg senest redigeret d. 14.03.2015 01:48 af Bruger #16075

Bruger #21084 @ 14.03.15 07:37

Super.
Jeg prøver at integrere det i min kode. Jeg bruger mysqli, så det passer fint.
Mange tak :-)

Mvh Thomas

Upload til server

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler