image height/width v. upload af image

getimagesize() : http://dk.php.net/manual/en/function.getimagesize.php

<?php
$size = getimagesize ("img/flag.jpg");
echo "<img src=\"img/flag.jpg\" {$size[3]}>";
?>

eksemplet var ikke supergodt, men du fanger det nok alligevel.

eks.:
<form action=$PHP_SELF method=post name=newtipform style='display : inline;' enctype=\"multipart/form-data\">
echo "
  <img src=\"gettempimg.php\" width=100 height=120>Choose a new image<br>
  <INPUT type=file name=\"c_billede\"><br>
  <INPUT TYPE=hidden name=MAX_FILE_SIZE value=131072>
  <input type=radio name=dotip value=edit checked>Update Image:<br>
  <input type=submit name=tip value=\"Submit Data\">
</form>


her beder jeg en bruger om at vælge et billede som skal uploades til en database på serveren. Og det er det billede jeg vil have højde og bredde på.

Ved lidt -meget- snedig javascript samt et enkelt hidden <div> lykkedes det.

Det havde vist været nemmere bare at bruge getimagesize() på den uploadede fil - ikke?

ikke hvis den bliver lagt i en database med det samme.

hvad hvis folk ikke har javascript enablet... - eller at du har kodet noget der kun fungerer i enkelte browsere - det problem har du ikke med getimagesize().

Jeg vil forøvrigt gerne se din javascript løsning!

Nu ved jeg at dem som skal bruge denne løsning vil have javascript enablet. Og ellers kan de sg lære det ;-)

Dele af scriptet har jeg "lånt" fra et andet site som benyttede det som "vis billede" funktion.

<script language="javascript">
<!--
    function getImgData()
    {
        ImagePath = document.forms.formnavn.o_billede.value;
        if (ImagePath.toLowerCase().indexOf(".gif") == -1 && ImagePath.toLowerCase().indexOf(".jpg") == -1 && ImagePath.toLowerCase().indexOf(".jpeg") == -1 && ImagePath.toLowerCase().indexOf(".jpe") == -1 && ImagePath.toLowerCase().indexOf(".bmp") == -1 && ImagePath.toLowerCase().indexOf(".png") == -1)
        {
            alert("Formatet på billedet skal være gif, jpg eller png");
        }
        else
        {
            if (ImagePath.indexOf(":") == 1)
            {
                imgPath = "File:///" + ImagePath;
            }
            else imgPath = ImagePath;
            // Læg billede i <div>   
            document.all.tempImageStorage.innerHTML = "";
            document.all.tempImageStorage.innerHTML = "<img src='" + imgPath + "'>";
        }
        // find og sæt hoejde og bredde
        // Efter noget experimenteren fandt jeg at 100 var en god faktor
        if (document.all.tempImageStorage.all[0].clientWidth > 0)
        {
            tmpWidth    = winWidth    = document.all.tempImageStorage.all[0].clientWidth;
            tmpHeight    = winHeight    = document.all.tempImageStorage.all[0].clientHeight;
            if (tmpWidth > 120 || tmpHeight > 100)
            {
                if ((tmpWidth / 100) > (tmpHeight / 100))
                {
                    winWidth    = 120;
                    winHeight    = tmpHeight * (100 / tmpWidth);
                }
                else
                {
                    winHeight    = 100;
                    winWidth    = tmpWidth * (100 / tmpHeight);
                }
            }
            document.forms.formnavn.bredde.value = winWidth;
            document.forms.formnavn.hoejde.value = winHeight;
        }
    }
//-->
</script>

Det var så javascriptet.

Det smidder billedet ned i en <div> som er hidden osv..

<div style=\"visibility:hidden;position:absolute;top:-2000px;left:-2000px\" id=\"tempImageStorage\"></div>

og her er så et udkast af formen. Efter kald til $_SERVER["PHP_SELF"] kan man så lægge $hoejde og $bredde ind i db.

<img src=\"hentbilledefradatabase.php?o_id=$o_id\" width=$row[image_width] height=$row[image_height]> Vælg evt. nyt billede<br>
<input type=file name=\"o_billede\" onchange=\"java script:getImgData()\"><br>
<input TYPE=hidden name=MAX_FILE_SIZE value=131072>
<input type=hidden name=hoejde>
<input type=hidden name=bredde>

hold da kæft... - hele den smørre i stedet for 3-4 liniers php... - nå ja - bare du er tilfreds!

-men behørigt imponeret, dét er jeg!

ok.. så vis mig hvordan du ville gøre det. og husk. du skal have lagt højde og bredde ned i databasen. ikke noget med at lægge billedet temporært på serveren ..;-)

Jeg forstår ikke hvorfor du lige pludselig kommer med et ekstra krav "ikke noget med at lægge billedet temporært på serveren ..;-)" - men går udfra det bare er for sjov!

Noget i retning af:

<form enctype="multipart/form-data" action="phpside.php" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="30000">
Send this file: <input name="userfile" type="file">
<input type="submit" value="Send File">
</form>

phpside.php:
<?php
// In PHP earlier then 4.1.0, $HTTP_POST_FILES should be used instead of $_FILES.
// In PHP earlier then 4.0.3, use copy() and is_uploaded_file() instead of move_uploaded_file

$uploaddir = '/var/www/uploads/';
$newfilename = $uploaddir . $_FILES['userfile']['name'];
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $newfilename)) {
  $imginfo = getimagesize($newfilename);
  $imgwidth = $imginfo[0];  //bredde i pixels
  $imgheight = $imginfo[1]; //højde i pixels
  $imgtype = $imginfo[2];  //jpg, gif, bmp osv
  $imghtml = $imginfo[3];  //height="yyy" width="xxx" - for use directly in html
  ...
  mysql_query("INSERT INTO table VALUES($imgwidth, $imgheight)");
  ...
} else {
  print "Possible file upload attack!  Here's some debugging info:\n";
  print_r($_FILES);
}
?>

NB: Du har desuden en fejl i din formular - max-file-size felt skal placeres inden file-input felt! (Ellers vil det ikke fungere i alle browsere!)

Fungerer på: GIF, JPG, PNG, SWF, SWC, PSD, TIFF, BMP og IFF filer...

Hvorfor bruger du ikke bare getimagesize() når du henter dem?

don: Tak skal du have :-)

hvad i er sjove.. ok.. i kan have ret.. men da jeg smidder billedet direkte i en database..

Jeg forstår ikke din kommentar - har du accepteret at løsningen er smartere og mere sikker eller...?

PS: Så fik du også en gratis løsning til dit spørgsmål - så kunne det jo ikke være bedre.

jeg har ikke noget imod at acceptere et nederlag ;-)

Jeg siger ikke at din løsning er forkert, jeg siger bare at den ikke er brugbar da jeg tager billedet og lægger i en database med det samme.(fremgangsmåden her kan sikkert diskuteres).

Hvis jeg lagde billedet på serveren ville jeg kunne hente data fra det med det du har lavet. Ingen tvivl om det. Men da billedet eksisterer to steder: på klienten og i databasen ser jeg ikke anden mulighed en den som jeg har lavet (stjålet ;-))
GetImageSize() kører jo på serveren og ikke på klienten..

Som sagt, jeg ville på intet tidspunkt have noget imod at give points og erkende min fejl hvis løsningen var brugbar for mig.

Hvordan lægger du det "direkte" i databasen?

Personligt kender jeg ikke en metode der kan uploade en fil direkte op i en tabel - så det vil jeg gerne lære!

bigo: Det er ikke ironisk eller noget - jeg vil seriøst gerne vide det, fordi jeg kan bruge det selv!

Database:


DROP TABLE IF EXISTS `tempbillede`;
CREATE TABLE `tempbillede` (
  `binary_junk` longblob NOT NULL,
  `filename` varchar(255) NOT NULL default '',
  `filesize` float NOT NULL default '0',
  `filetype` varchar(20) NOT NULL default '',
  `image_height` char(3) NOT NULL default '',
  `image_width` char(3) NOT NULL default ''
) TYPE=MyISAM;


admin_temp.php:

<?
if ($menuselect) header("location: $menuselect");
?>
<html>
<head>
<script language="javascript">
<!--
    function getImgData()
    {
        ImagePath = document.forms.newtempform.c_billede.value;
        if (ImagePath == "")
        {
            browseName = (navigator.browserLanguage.indexOf("en") != -1) ? "Browse..." : "Gennemse...";
            alert("Du kan først se billedet, når du har tilføjet det. \nKlik på \"" + browseName + "\" og find et billede på din computer");
        }
        else if (ImagePath.toLowerCase().indexOf(".gif") == -1 && ImagePath.toLowerCase().indexOf(".jpg") == -1 && ImagePath.toLowerCase().indexOf(".jpeg") == -1 && ImagePath.toLowerCase().indexOf(".jpe") == -1 && ImagePath.toLowerCase().indexOf(".bmp") == -1 && ImagePath.toLowerCase().indexOf(".png") == -1)
        {
            alert("Formatet på billedet skal være enten gif, jpg, bmp eller png");
        }
        else if (ImagePath.indexOf("http") != -1 || ImagePath.indexOf("ftp") != -1)
        {
            alert("Billedet skal findes på en harddisk, cd, diskette eller lignende.\n\nDer kan ikke bruges billeder fra Internetadresser.\n\nDu skal slette den indtastede billedsti før du kan fortsætte.");
        }
        else
        {
            if (ImagePath.indexOf(":") == 1)
            {
                imgPath = "File:///" + ImagePath;
            }
            else imgPath = ImagePath;
           
            document.all.tempImageStorage.innerHTML = "";
            document.all.tempImageStorage.innerHTML = "<img src='" + imgPath + "'>";
        }
        if (document.all.tempImageStorage.all[0].clientWidth > 0)
        {
            tmpWidth    = winWidth    = document.all.tempImageStorage.all[0].clientWidth;
            tmpHeight    = winHeight    = document.all.tempImageStorage.all[0].clientHeight;
            if (tmpWidth > 120 || tmpHeight > 100)
            {
                if ((tmpWidth / 100) > (tmpHeight / 100))
                {
                    winWidth    = 120;
                    winHeight    = tmpHeight * (100 / tmpWidth);
                }
                else
                {
                    winHeight    = 100;
                    winWidth    = tmpWidth * (100 / tmpHeight);
                }
            }
            document.forms.newtempform.bredde.value = winWidth;
            document.forms.newtempform.hoejde.value = winHeight;
        }
    }
//-->
</script>

<title>Administration of Temporary Image</title>
<link rel=stylesheet href='opskriftstyle.css' type='text/css'>
</head>
<?
require("vars.php");
include('functions.php');
//checklogin();

//Foretag ændringer
switch ($dotemp)
{
    case "edit" :
        if (!empty($c_billede))
        {
            $c_binary_junk = addslashes(fread(fopen($c_billede, "r"), filesize($c_billede)));
            $sql = "UPDATE tempbillede SET binary_junk = '$c_binary_junk', filename='$c_billede_name', filesize='$c_billede_size', filetype = '$c_billede_type', image_height = '$hoejde', image_width = '$bredde'";
        }
        mysql_query($sql) or die(mysql_error());
        break;
} // End dotemp

// Dan side
echo "
<body topmargin=0 marginwidth=0 marginheight=0 BottomMargin=0 LeftMargin=0 RightMargin=0>
<div style=\"visibility:hidden;position:absolute;top:-2000px;left:-2000px\" id=\"tempImageStorage\"></div>
<table width=100% height=2% style='border-bottom:solid 1px;border-left:solid 1px;border-right:solid 1px;border-top:solid 1px;'>
    <tr>
        <td>
            <h1>TempBillede Administration</h1>
        </td>
        <td>
";
include "menu_inc.php";
echo "
        </td>
    </tr>
</table>
<table width=100% height=20%>
<tr><td>
    <table>
        <tr>
        <td valign=top>
            <form action=$PHP_SELF method=post name=newtempform style='display : inline;' enctype=\"multipart/form-data\">
";
?>
            <img src=gettempimg.php width=100 height=120>Choose a new image<br>
                    <INPUT type=file name=c_billede onchange="java script:getImgData()"><br>
                    <INPUT TYPE=hidden name=MAX_FILE_SIZE value=131072>
                    <input type=hidden name=hoejde>
                    <input type=hidden name=bredde>
                <input type=radio name=dotemp value=edit checked>Update Image:<br>
                <input type=submit name=temp value="Submit Data">
          </form>
        </td>
        </tr>
    </table>
</td></tr></table>

</body>
</html>


gettempimg.php:

<?
include "vars.php";
include "functions.php";

$noData = true;

$sql="SELECT * FROM tempbillede";

$result = @MYSQL_QUERY($sql) or $noData=false;

if ($noData==true)
{
    $data = @MYSQL_RESULT($result,0,"tip_image");
    $type =    @MYSQL_RESULT($result,0,"filetype");
   
    Header(    "Content-type: $type");
    echo $data;
} // End if
if ($noData==1)
{
    $sql="SELECT * FROM    tempbillede WHERE binary_junk IS NOT NULL";
    $result    = @MYSQL_QUERY($sql);
   
    $data =    @MYSQL_RESULT($result,0,"binary_junk");
    $type =    @MYSQL_RESULT($result,0,"filetype");
   
    Header("Content-type: $type");
    echo $data;
}    // End if

?>

Så vidt jeg kan se er det her du indsætter billedet:

//Foretag ændringer
switch ($dotemp)
{
    case "edit" :
        if (!empty($c_billede))
        {
            $c_binary_junk = addslashes(fread(fopen($c_billede, "r"), filesize($c_billede)));
            $sql = "UPDATE tempbillede SET binary_junk = '$c_binary_junk', filename='$c_billede_name', filesize='$c_billede_size', filetype = '$c_billede_type', image_height = '$hoejde', image_width = '$bredde'";
        }
        mysql_query($sql) or die(mysql_error());
        break;
} // End dotemp

Men da det er en fil du læser ($c_billede) må den vel nødvendigvis også ligge på serveren!? - Ikke at jeg kan se, hvorfra variablen $c_billede kommer, men det må vel stamme fra en af de inkluderede filer?

Så er det jo bare at gøre sådan her i stedet:

//Foretag ændringer
switch ($dotemp)
{
    case "edit" :
        if (!empty($c_billede))
        {
            $imginfo = getimagesize($c_billede);
            $bredde = $imginfo[0];  //bredde i pixels
            $hoejde = $imginfo[1]; //højde i pixels
            $$c_billede_type = $imginfo[2];  //jpg, gif, bmp osv
            $c_binary_junk = addslashes(fread(fopen($c_billede, "r"), filesize($c_billede)));
            $sql = "UPDATE tempbillede SET binary_junk = '$c_binary_junk', filename='$c_billede_name', filesize='$c_billede_size', filetype = '$c_billede_type', image_height = '$hoejde', image_width = '$bredde'";
        }
        mysql_query($sql) or die(mysql_error());
        break;
} // End dotemp

Correct me if I'm wrong!

Du bør forøvrigt også slette (vha. unlink()) den uploadede fil - det kan jeg ikke se at du gør nogle steder?

$c_billede er herfra:
<INPUT type=file name=c_billede onchange="java script:getImgData()">
derfor vil du få dit billede ind som en datastreng. det er skide smart.
automatisk (php ting) vil du få c_billede_name og c_billede_type med.
Så det bliver ikke lagt på serveren. Det bliver overført som en datastreng.

Fancy!

Er det fordi du ikke har mulighed for at bruge filupload at du bruger den løsning?

Fungerer det på tværs af browsere?

Kan det give problemer afhængig af billedstørrelsen - jeg ved eks. IE har nogle issues mht. maks størrelse af GET- eller POST-requests?

-men ellers rigtigt smart!

Jeg var lidt meget træt af at hele tiden skulle forholde mig til hvorvidt det var unix eller w32 skidtet kørte på iforhold til filplacering osv. med rettigheder.. så jeg besluttede mig for at prøve og smide skidtet i databasen.. og det kører faktisk utroligt hurtigt taget datamængden i betragtning.

Det fungerer udemærket på tværs.. Det må siges at være interbrowserkompatibelt ;-)

Jeg har endnu ikke set nogen grænser: men jeg har også kun smidt 1600x1200 billeder op.

ja sgu at det er smart.. (når jeg selv skal sige det..)