Upload obrázků - Builder.cz - Informacni server o programovani

redakcni system

redakcni system

20. prosince 2001, 00.00 | Pokračujeme v tvorbě vlastního redakčního systému v PHP. Dnes načneme téma uploadování obrázků ke článkům. Chcete mít vlastní redakční systém? Sledujte náš seriál...

První co se nám zobrazí je formulář pro vložení článku. Tam jsou první změny. Nejdříve se musí změnit typ odesílaných dat, aby server věděl, že mu nepřicházejí jen textové řetězce, ale i obrázek. Výsledkem toho je, že musíme zadat typ kodování dat. Bude to tedy vypadat následovně:

<FORM METHOD="POST" ACTION="add_clanek.php" ENCTYPE="multipart/form-data">

Tím serveru říkáme, že je zde více typů dat. Základním typem kódování je application/x-www-form-urlencoded. Ten je ale pro nás nepoužitelný. My musíme použít multipart/form-data. Každé pole je pak přenášeno jako jedna část MINE zprávy. Musíme také použít metodu odesílání typu POST.

Další věc, kterou musíme udělat, je načíst obrázek do formuláře. To nám udělá následující řádek.

<TR>
     <TD><B>Připojit obrázek</B></TD>
     <TD><INPUT TYPE="FILE" SIZE=50 NAME="obr" ACCEPT="image/*"></TD>
</TR>

Tyto čtyři řádky přidáme do formuláře, a tím si zajistíme načítání obrázku. Myslím, že jediné co potřebuje vysvětlení, je parametr ACCEPT. Ten nám říká, jaký typ souborů můžeme do formuláře vložit. Hodnota image/* nám bude brát všechny obrázky. Můžeme však autory omezit jen na jpeg obrázky (image/jpeg ale také image/pjpeg), gify (image/gif) či obrázek z ASCII-znaků (text/plain). Ve "windowsovském" oknu se sice zobrazí, že tam můžeme vloži jakýkoliv soubor, ale prohlížeč, pokud typ souboru nesouhlasí, nedovolí formulář odeslat.

Vložili jsme obrázek, napsali článek a odeslali formulář. Na začátku scriptu addclanek.php je něco, co nám ukládá články do databáze. My to musíme trochu změnit. Mělo by to vypadat takhle:

if ($send && $obr_size<=20480 && $nadpis && $clanek)
{
  // pokud je zaškrnuto BEZ HTML nahradíme konce řádků tagy 
  if ($bezhtml == "ano") $clanek = nl2br($clanek);

  // vložíme článek do databáze
  @$sql = mysql_query("INSERT INTO clanky VALUES('',$autor,$rubrika,".time().",
        0,0,'$nadpis','$perex','$clanek','$poznamka','n')");
  // uložíme obrázek
 if($obr_size!=0)
{
  $n=MySQL_Insert_Id();
    $a=GetImageSize($obr);
  if($a[2]=="1"):
      Copy($obr, "../images/$n.jpeg");
  elseif($a[2]=="2"):
      Copy($obr, "../images/$n.gif");
  endif;
}
elseif($send) 
{
echo "<H3 ALIGN=\"CENTER\">Chybí povinné údaje</H3>\n";
}
   ?>
  <H3 ALIGN="CENTER">Článek vložen</H3>
  <?
  // ukončíme skript
  foot();
  exit;
}
// zobrazení formuláře
if($send && $obr_size>=20480)
echo "<H3 ALIGN=\"CENTER\"><FONT COLOR=\"#FF0000\">
                Obrázek má více než 20 KB</FONT></H3>";
?>

Podmínka se provede, jen když je odeslána z formuláře proměnná $send, velikost obrázku je menší než 20 KB (1 KB=1024 B to jest 2¹⁰, jen pro úplnost), článek má nadpis a je něco v těle zprávy. Vložíme článek do databáze, protože jak víme, generování se spouští až po schválení článku. Pokud exisistuje obrázek, uložíme ho. Funkce MySQL_Insert_Id() zjistí hodnotu ID posledního příkazu INSERT tam, kde se ID generuje automaticky. Tím se myslí, že když jsme vytvářeli tabulku museli jsme u této položky udat direktivu AUTO_INCREMENT. Jinak jsme nuceni spoléhat se na jiné možnosti, jako například vybrat všechny id a z nich vybrat to největší. Je tu ještě ta divná proměnná $obr_size. Když odesíláme tímto způsobem formulář, tak v našem případě máme obrázek v proměnné $obr. Tam máme uloženo jméno souboru, do kterého nám PHP obrázek DOČASNĚ uložilo. Tento soubor se po ukončení scriptu smaže. Pokud s ním ještě chceme pracovat, musíme ho překopírovat někam jinam. U proměnné $obr máme k dispozici ještě doplňkové proměnné. Jsou to $obr_size, kde je uložena velikost souboru v bytech, $obr_type zjistí typ dat a $obr_name obsahuje jméno souboru v takové podobě, v jaké ho měl autor na svém počítači. My ale používáme pro zjištění typu obrázku GetImageSize(). Proměnnou $obr_type nepoužívám, protože MINE typ se nastavuje podle koncovky a funkce GetImageSize() to zjišťuje pomocí analýzy hlavičky souboru. Ještě něco. Jestliže zeleně označený text přidáte do scriptu add_user.php, bude se vám chybová hláška zobrazovat jen a pouze, pokud budou chybět povinné údaje. Nezapomeňte přidat skryté pole do formuláře. (kde $send=true).

Něco si k této funkci řeknem. Má dva parametry. První typu string, ve kterém je uloženo jméno souboru (respektive cesta k souboru). Druhý je pro nás nepodstatný. Návratový typ je asociativní jednorozměrné pole. Pole je čtyřprvkové. V prvku s indexem 0 dostaneme šířku obrázku, s číslem 1 zase výšku. Pro nás je důležitý ten s číslem 2. Vrací typ obrázku. K dispozici máme GIF, JPG a PNG. Tyto formáty odpovídají určitým hodnotám:

GIF=1
JPG=2
PNG=3

Poslední prvek obsahuje řetězec ve tvaru height=xxx width=xxx, kde xxx nahrazuje rozměry obrázku. Proto tam kde chcete, aby se zobrazil obrázek v plném rozměru můžete použít tohle:

<? $size = GetImageSize("img/obr.jpg"); ?>
<IMG SRC="img/obr.jpg" <? echo $size[3]; ?>>

Přesto, že se jedná o "obrázkovou" funkci, nemusíme používat knihovnu GD. To jen tak mimochodem. A teď si konečně vysvětlíme onu podmínku. Pokud je obrázek typu jpeg, uložíme ho do adresáře ./images a jako název dáme číslo článku. To samé oděláme s obrázkem typu gif. Ještě malé vysvětlení fce Copy(). Pokud to vezmu zkráceně, tak první parametr naznačuje co a druhý, kam máme kopírovat.

Nyní jen uděláme menší změnu v souboru korektura.php. Následující řádky umístíme před konec tabulky.

<?
if (File_Exists("../images/$id.jpeg")):
echo "<TR ALIGN=\"Center\"><TD COLSPAN=2 ALIGN=\"Center\">
<A HREF=\"../images/$id.jpeg\" TARGET=\"_blank\">Připojený obrázek</A>
</TD></TR>";
elseif(File_Exists("../images/$id.gif")):
echo "<TR ALIGN=\"Center\"><TD COLSPAN=2 ALIGN=\"Center\">
<A HREF=\"../images/$id.gif\" TARGET=\"_blank\">Připojený obrázek</A>
</TD></TR>";
else:
echo "<TR><TD COLSPAN=2 ALIGN=\"Center\">Bez obrázku<TD></TR>";
endif;
?>
</FORM>
<? 
if(File_Exists("../images/$id.jpeg") or File_Exists("../images/$id.gif")) { ?>
<TR><TD COLSPAN=2 ALIGN="Center"><FORM ACTION="korektura.php" METHOD="POST">
<INPUT TYPE="HIDDEN" NAME="smaz" VALUE="<? echo $id; ?>">
<INPUT TYPE="SUBMIT" VALUE="Smazat obrázek"
ONCLICK="return confirm('Opravdu chceš obrázek smazat')"></FORM></TD></TR>
<?
}
?>

Co se to děje? Pokud existuje obrázek s číslem $id a je typu jpeg či gif, vytvoříme na něj odkaz, aby si ho korektor mohl prohlédnout. Když obrázek není připojen, vypíšeme "Bez obrázku". Tím končí formulář pro úpravu článku. Když obrázek existuje, můžeme jej smazat. Tehdy se nám objeví formulářové tlačítko s nápisem "Smazat obrázek". Je to vlastně formulář, který odešle skryté pole s názvem smaz a hodnotou, která odpovídá číslu obrázku. Ten je poté smazán. Ještě před odesláním je zobrazeno okno s dotazem na jistotu rozhodnutí korektora.

Asi by ale bylo potřeba se autora napřed zeptat, jestli s tím souhlasí. Nejlépe mu poslat mail. Jak to udělat poloautomaticky, si řekneme příště.