Blog
Web development: Inteligentní upload libovolného počtu souborů na server
| Zobrazit obsah | Zobrazit komentáře | Zobrazit pouze komentáře
|
Konečně jsem si našel čas, abych vyřešil inteligentní a neomezené (co se počtu souborů týče) uploadovaní na server. Spojením PHP, DOM a Java Scriptu vzniklo něco, co vidíte v následujících výpisech kódu. Odkaz na ukázku (uploadování nefunguje, abyste mně nezaneřádili web). Samozřejmě je potřeba ještě doplnit akceptování uploadovaného souboru - doplním.
uploadFile-Form.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<title>KAVALEK.NET - Upload File</title>
<script src="inputFileElementControl.js" type="text/javascript"></script>
</head>
<body>
<form id="fileUpload" method="post" action="uploadFile-Action.php" enctype="multipart/form-data">
<input type="hidden" name="action" value="upload" />
<div>
<input type="file" name="files[]" />
</div>
</form>
<a href="javascript:void(0);" title="Add next file" onclick="addFileElement('fileUpload');">Upload next file</a>
<br />
<a href="javascript:void(0);" title="Submit this form" onclick="document.getElementById('fileUpload').submit();">Submit file(s)</a>
</body>
</html>
uploadFile-Action.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<title>KAVALEK.NET - Upload File</title>
</head>
<body>
<?php
// DIR for storing files
define("UPLOAD_DIR", "upload/");
if(isset($_POST["action"]) && ($_POST["action"] == "upload")) {
printf("<h1>Files to upload</h1>");
$countOfFiles = count($_FILES["files"]["name"]);
for($i = 0; $i < $countOfFiles; $i++) {
$file = $_FILES["files"]["tmp_name"][$i];
$fileType = $_FILES["files"]["type"][$i];
$fileName = $_FILES["files"]["name"][$i];
$fileSize = $_FILES["files"]["size"][$i];
$fileSize = round($fileSize / 1024);
$fileTimeStamp = date("YmdHis");
printf("<div>");
if(copy($file, UPLOAD_DIR . $fileTimeStamp . "_" . $fileName))
printf("File <b>%s</b> (%s kB) was succesfully uploaded", $fileName, $fileSize);
else
printf("Error uploading file %s", $fileName);
printf("</div>");
}
printf("<br /><div><a href=\"uploadFile-Form.php\" title=\"Upload new file\">Upload new file</a></div>");
}
?>
</body>
</html>
inputFileElementControl.js
// File name: inputFileElementControl.js
// Last change: 2006-11-12
// Author: Tomas Kavalek, KAVALEK.NET
// E-mail: tomas.kavalek@gmail.com
// WWW: http://www.kavalek.net/
// -----------------------------------------------------------------------------
// DIV iterator for removing INPUT elements
var fileInputId = 0;
// -----------------------------------------------------------------------------
// Function for adding DIV, INPUT and A elements into HTML
function addFileElement(e) {
// DIV element
newDiv = document.createElement("div");
newDiv.id = "fileDiv" + fileInputId;
// INPUT element
newFile = document.createElement("input");
newFile.type = "file";
newFile.id = "files[]";
newFile.name = "files[]";
// A element
newLink = document.createElement("a");
newLink.href = "javascript:void(0);";
newLink.setAttribute("onclick", "removeFileElement(" + fileInputId + ");");
newLink.innerHTML = "Remove this file";
// Complete new element
newDiv.appendChild(newFile);
newDiv.innerHTML += " ";
newDiv.appendChild(newLink);
// Add to page
document.getElementById(e).appendChild(newDiv);
// Increase iterator
fileInputId++;
}
// -----------------------------------------------------------------------------
// Remove DIV element containig INPUT and A elements
function removeFileElement(id) {
divFile = document.getElementById('fileDiv' + id);
divFile.parentNode.removeChild(divFile);
}
// -----------------------------------------------------------------------------
Komentáře k tématu 'Inteligentní upload...' (14 komentářů)
Flexa - poděkování
díky
Tomáš Kavalek - Re: poděkování
Není zač, jsem rád, v případě, že to pomohlo 
Tomáš Barnet - Re: Re: poděkování
Ahoj Tome, mám problém. Nejede mi fce COPY. Pokud používám localhost, je vše ok. Pokud to nahraji na server, kde jsou práva adresáře 777, tak to píše: Warning: copy() has been disabled for security reasons
Co s tím? Děkuji. Tom
Tomáš Kavalek - Re: Re: Re: poděkování
Ahoj, omlouvám se za opožděnou reakci. Je potřeba použít alternativní funkci (copy_remote_file()), která je součástí zápisu http://kavalek.net/blog/web-development/extrakce-vzdaleneho-archivu-zip/. Z důvodu nastavení safe mode nemůžeš funkci copy použít. Nevím však, na kolik to bude funkční, co se času týče. Určitě bude toto řešení časově náročnější a nevím, jak se bude chovat pro větší soubory. Kdyby si měl i nadále problémy, ozvi se třeba po ICQ nebo po Jabberu.
Insider - Re: Re: Re: Re: poděkování
Zdravim,
nebylo by lepsi pouzivat move_uploaded_file(), tahle funkce by mela fungovat na vetsine hostingu a uz podle nazvu bych rekl, ze se k uploadu tak nejak hodi
Tomáš Kavalek - Re: Re: Re: Re: Re: poděkování
Díky za informaci, musím se přiznat, že o této funkci jsem vážně nevěděl, vcelku dobré vysvětlení a nějaký ten návod je zde - http://econnect.ecn.cz/index.stm?x=74645 tak snad to bude stačit.
Thomas - změna
Dobrý den, potřeboval bych poradit. Postupoval jsem podle navodu v tomto clanku a vse v poradku funguje. Pouze bych chtel zamezit nahravani souboru PHP a taky pri nahrati souboru na web, aby to vypsalo hlasku s celou cestou k souboru. Jo a da se nejak udelat aby to neprejmenovavalo nahrany soubor? Diky za odpoved.
Tomáš Kavalek - Re: změna
Samozrejme, vsechno jde, ale abych zde vypisoval cele reseni, to po mne nechtej. Jestli alespon trosku PHP ovladas, tak bys to mel vedet, stejne jako treba jak zamezit prejmenovani - staci upravit funkci copy, kde odstranis $fileTimeStamp, atd.
Tomáš Kavalek - Re: změna
Typ souboru muzes testovat treba podle $fileType, kdyz to bude php, tak to neakceptovat.
Kuratkoo - nejde v IE7
Ahoj, nefunguje mi odebirani inputu v IE7. Firefox se chova bez problemu..
Tomáš Kavalek - Re: nejde v IE7
Ahoj, popravdě řečeno, v MSIE7 jsem to ještě nezkoušel, protože jsem mu dal přímý zákaz vstupu do mého počítače v jakékoliv podobě, ale pokusím se to nějak udělat a odladit.
Tomáš Kavalek - Re: Re: nejde v IE7
Tak nevim proc, ale nekorektne to reaguje na odkaz v href na javascript:void(0); a zaroven onclick. Staci tedy upravit nasledujicim zpusobem:
// newLink.href = "javascript:void(0);";
newLink.setAttribute("href", "javascript:removeFileElement(" + fileInputId + ");");
Ale je to vazne divne, nevim co si zase kluci v Redmondu vymysleli za specialitku 
Kuratkoo - Re: Re: Re: nejde v IE7
Super, díky, už vše funguje
Tomáš Kavalek - Re: Re: Re: Re: nejde v IE7
Neni zac, rad jsem pomohl. Docela me to samotneho zarazilo, jeste si musim udelat trosku cas na upravu celeho zapisu.