V tomto tutoriále,vám ukážem, ako si veľmi jednoducho bez databázy MySQL vytvoríme upload súborov,obrázkov a dokumentov. Pre bezpečnosť môžeme nastaviť heslo pre upload aby pridávali súbory len tý ktorý budú mať heslo. Tak môžme ísť nato
Súbory ktoré si vytvoríme:
Zložky:
images (Tu vložíme ikony pre súbory ako je ikona pre .jpg súbor…)
js (Zložka pre javascript kód)
style (Tu vložíme súbor zo vzhľadom .css)
uploads (Zložka kde sa všetke uploadnute súbory budu ukladať sem)
Súbory:
index.php
nastavenia.php
style.css-Vložiť do zložky style
filestorage.js-Vložiť do zložky js
picture.jpg
text.jpg
zip.jpg
Tieto 3 ikony vložiť do zložky images
Otvoríme si index.php a doň vložíme (V komentaroch mame teoriu) :
<?php
//Načítať nastavenia
require_once("nastavenia.php");
$message = "";
//Má užívateľ nahrať niečo?
if(isset($_FILES['file']))
{
$target_path = Settings::$uploadFolder;
$target_path = $target_path . time() . '_' . basename( $_FILES['file']['name']);
//Skontroluje heslo pre nahrávanie
if($_POST['password'] != Settings::$password)
{
$message = "Zlé heslo";
}
else
{
//Skúste presunúť nahraný súbor do určenej zložky
if(move_uploaded_file($_FILES['file']['tmp_name'], $target_path)) {
$message = "Súbor ". basename( $_FILES['file']['name']).
" bol úspešne nahratý";
} else{
$message = "Vyskytla sa nejaká chyba pri uploade. Pravdepodobne sa jedná o veľký súbor. Skúste to znova";
}
}
//Vymazať pole
unset($_FILES['file']);
}
if(strlen($message) > 0)
{
$message = '<p class="error">' . $message . '</p>';
}
/** LIST UPLOADED FILES **/
$uploaded_files = "";
//Otvoriť adresár pre čítanie
$dh = opendir(Settings::$uploadFolder);
//LOOP prostredníctvom súborov
while (($file = readdir($dh)) !== false)
{
if($file != '.' && $file != '..')
{
$filename = Settings::$uploadFolder . $file;
$parts = explode("_", $file);
$size = formatBytes(filesize($filename));
$added = date("m/d/Y", $parts[0]);
$origName = $parts[1];
$filetype = getFileType(substr($file, strlen($file) - 3));
$uploaded_files .= "<li class=\"$filetype\"><a href=\"$filename\">$origName</a> $size - $added</li>\n";
}
}
closedir($dh);
if(strlen($uploaded_files) == 0)
{
$uploaded_files = "<li><em>Žiadne súbory</em></li>";
}
function getFileType($extension)
{
$images = array('jpg', 'gif', 'png', 'bmp');
$docs = array('txt', 'rtf', 'doc');
$apps = array('zip', 'rar', 'exe');
if(in_array($extension, $images)) return "Obrázky";
if(in_array($extension, $docs)) return "Dokumenty";
if(in_array($extension, $apps)) return "Aplikácie";
return "";
}
function formatBytes($bytes, $precision = 2) {
$units = array('B', 'KB', 'MB', 'GB', 'TB');
$bytes = max($bytes, 0);
$pow = floor(($bytes ? log($bytes) : 0) / log(1024));
$pow = min($pow, count($units) - 1);
$bytes /= pow(1024, $pow);
return round($bytes, $precision) . ' ' . $units[$pow];
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" media="all">
@import url("style/style.css");
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<title>Úložisko súborov-pocitacovyexpert.6f.sk</title>
</head>
<body>
<div id="container">
<h1>Upload súborov-Pocitacovyexpert.eu</h1>
<form method="post" action="index.php" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
<fieldset>
<legend>Pridať nový súbor do úložiska</legend>
<?php echo $message; ?>
<p><label for="name">Vybrať súbor(max 100KB)</label><br />
<input type="file" name="file" /></p>
<p><label for="password">Heslo pre nahranie (na tomto servery žiadne)</label><br />
<input type="password" name="password" /></p>
<p><input type="submit" name="submit" value="Nahraj" /></p>
</fieldset>
</form>
<fieldset>
<legend>Predmninulé nahrané súbory</legend>
<ul id="menu">
<li><a href="">Všetke súbory</a></li>
<li><a href="">Dokumenty</a></li>
<li><a href="">Obrázky</a></li>
<li><a href="">Aplikácie</a></li>
</ul>
<ul id="files">
<?php echo $uploaded_files; ?>
</ul>
</fieldset>
</div>
<script src="js/filestorage.js" />
</body>
</html>
Tak a teraz si trocha vysvetlíme o čo ide:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" media="all">
@import url("style/style.css");
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<title>Úložisko súborov-pocitacovyexpert.6f.sk</title>
</head>
<body>
Prvá vec ktorú sme urobili, je prázdny HTML dokument. Používam XHTML 1.0 Transitional s ISO-8859-1 char set. Ak dávate prednosť, a nemajú potrebu špeciálnych znakov, môžete ho nahradiť s UTF-8 char set.
<div id="container"> <h1>Upload súborov-Pocitacovyexpert.eu</h1> <form method="post" action="index.php" enctype="multipart/form-data"> <input type="hidden" name="MAX_FILE_SIZE" value="100000" /> <fieldset> <legend>Pridať nový súbor do úložiska</legend> <?php echo $message; ?> <p><label for="name">Vybrať súbor(max 100KB)</label><br /> <input type="file" name="file" /></p> <p><label for="password">Heslo pre nahranie (na tomto servery žiadne)</label><br /> <input type="password" name="password" /></p> <p><input type="submit" name="submit" value="Nahraj" /></p> </fieldset> </form>
Druhá vec ktorú sme urobili že sme vytvorili formulár pre nahrávanie súborov pomocou HTML a vylepšili kodom CSS ktorý si hneď napíšeme.
Otvoríme si súbor style.css a doň vložíme:
@CHARSET "ISO-8859-1";
body
{
background-color: #cddcec;
font-family: "Arial";
font-size: 11px;
}
div#container
{
width: 600px;
margin: 0px auto;
border: 1px solid #e6eef6;
background-color: #ffffff;
}
div#container h1
{
background-color: #4b75b3;
margin: 0px;
padding: 8px;
font-family: "Arial";
font-weight: normal;
border: 1px solid #3564a9;
}
div#container fieldset
{
margin: 20px;
border: 1px solid #98b9d0;
}
ul#menu
{
list-style-type: none;
margin: 4px;
padding: 0px;
}
ul#menu li
{
float: left;
margin: 4px;
}
ul#menu li.active
{
background-color: #98b9d0;
border-left: 1px solid #3564a9;
border-top: 1px solid #3564a9;
border-bottom: 1px solid #e6eef6;
border-right: 1px solid #e6eef6;
}
ul#menu li a
{
text-decoration: none;
font-size: 10px;
padding: 2px;
color: #3564a9;
}
ul#files
{
list-style-type: none;
margin: 40px 0px 0px 0px;
padding: 0px;
}
ul#files li
{
background-color: #fff7c0;
border-bottom: 1px solid #efefef;
padding: 2px;
margin-bottom: 1px;
}
ul#files li a
{
text-decoration: none;
color: #3564a9;
padding: 2px 25px;
background-position: left;
background-repeat: no-repeat;
}
ul#files li.Documents a
{
background-image: url('../images/text.jpg');
}
ul#files li.Images a
{
background-image: url('../images/picture.jpg');
}
ul#files li.Applications a
{
background-image: url('../images/zip.jpg');
}
p.error
{
background-color: #fff7c0;
border-bottom: 1px solid #efefef;
font-weight: bold;
color: #ff0000;
padding: 6px;
}
Teraz si vytvoríme js skript ktorý nam uľahší regreshnutie stránky a tak sa nemusí od znova načítať. Otvoríme subor filestorage.js a doň vložíme:
/**
* Na Initialize DOMReady stránku funkčnosť
*/
$(document).ready(function(){
//Pridať funkcie do menu tlačidlami
prepareMenu();
});
/**
* Pripravuje menu tlačidla pre výber
* filetypes
* @return NULL
*/
function prepareMenu()
{
$("#menu li").click(
function () {
$("#menu li").each(
function(){
$(this).removeClass("active");
}
);
$(this).addClass("active");
HideFiles($(this).children().html());
return false;
});
//Vyberte najprv ako predvolený
$("#menu li:first").click();
}
/**
* Zobrazuje len vybrané typov súborov
* @param selector
* @return bool
*/
function HideFiles(selector)
{
//zobraziť všetky súbory
if(selector === "All files")
{
$("#files > li").show();
return true;
}
else
{
//zobraziť iba vybrané filetype
$("#files > li").hide();
$("#files > li." + selector).show();
return true;
}
}
Ďalej si otvoríme súbor nastavenia.php a doň vložíme:
<?php
class Settings
{
static $password = "heslo";
static $uploadFolder = "uploads/";
}
?>Ak chcete mať uložisko bez hesla tak heslo zmažte
Výsledok:
Nie som tak zdatný v tvorbe webu ale zaujalo ma to a skúsil som Funguje to bez chyby obdivujem takých ktorý dokážu niečo vytvoriť ja sám som samouk a robím to skôr pre zábavu klobúk dole Dík!
Zdravím, všetko funguje ok len ako zmenim tu max. velkosť? napr. na 10MB
function formatBytes ( $bytes, $precision = 2 ) { $units = array ( ‚B‘, ‚KB‘, ‚MB‘, ‚GB‘, ‚TB‘ ) ; $bytes = max ( $bytes, 0 ) ; $pow = floor ( ( $bytes ? log ( $bytes ) : 0 ) / log ( 1024 ) ) ; $pow = min ( $pow, count ( $units ) – 1 ) ; $bytes /= pow ( 1024, $pow ) ; return round ( $bytes, $precision ) . ‚ ‚ . $units [ $pow ] ;
1024 zmen na svoju velkost,ale len po max ktore ma php nastavene
Mne to bohužial nejde hodil som to na server a pri pridávané súboru mi to vypíše vždy: „Vyskytla sa nejaká chyba pri uploade. Pravdepodobne sa jedná o velký súbor. Skúste to znova“ pri tom tie súbory sú do 100KB. nejaký tip ? Ďakujem