Vytvorenie vlastného úložiska súborov pomocou PHP

Vytvorenie vlastného úložiska súborov pomocou PHP

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

Vytvorenie vlastného úložiska súborov pomocou PHP


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

Vytvorenie vlastného úložiska súborov pomocou PHP Vytvorenie vlastného úložiska súborov pomocou PHP picture.jpg

Vytvorenie vlastného úložiska súborov pomocou PHP  text.jpg

Vytvorenie vlastného úložiska súborov pomocou PHP  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:

http://www.pocitacovyexpert.6f.sk/php/upload

4 thoughts on “Vytvorenie vlastného úložiska súborov pomocou PHP

  1. 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!

    1. 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

  2. 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

Pridaj komentár

Vaša e-mailová adresa nebude zverejnená. Vyžadované polia sú označené *