Vstup pro nahrávání více souborů

Častěji se přistihnu, že chci nahrát více než jeden soubor najednou. Nutnost používat více „souborových“ INPUT prvků je otravné, pomalé a neefektivní. A pokud je nenávidím, nedokážu si představit, jak by byli moji uživatelé naštvaní. Naštěstí Safari, Chrome a Firefox implementovaly metodu, pomocí které mohou uživatelé nahrávat více souborů v rámci jednoho prvku INPUT.

Zobrazit ukázku

HTML

<!-- IMPORTANT:  FORM's enctype must be "multipart/form-data" -->
<form method="post" action="upload-page.php" enctype="multipart/form-data">
  <input name="filesToUpload[]" id="filesToUpload" type="file" multiple="" />
</form>

Jednoduché přidání atributu multiple umožňuje nahrát více souborů prostřednictvím jednoho prvku INPUT. Pokud kladete důraz na ověřování, budete chtít přiřadit atributu multiple hodnotu multiple.

Výpis více souborů pomocí JavaScriptu

//get the input and UL list
var input = document.getElementById('filesToUpload');
var list = document.getElementById('fileList');

//empty list for now...
while (list.hasChildNodes()) {
	list.removeChild(ul.firstChild);
}

//for every file...
for (var x = 0; x < input.files.length; x++) {
	//add to list
	var li = document.createElement('li');
	li.innerHTML = 'File ' + (x + 1) + ':  ' + input.files[x].name;
	list.append(li);
}

Vlastnost input.files poskytuje pole souborů, u kterých můžete zkontrolovat délku; pokud je tam délka, můžete procházet každý soubor a přistupovat k cestám a názvům souborů.

Příjem a manipulace se soubory pomocí PHP

if(count($_FILES['uploads']['filesToUpload'])) {
	foreach ($_FILES['uploads']['filesToUpload'] as $file) {
	    
		//do your upload stuff here
		echo $file;
		
	}
}

PHP vytvoří pole nahraných souborů s daným názvem INPUT. Tato proměnná bude v PHP vždy polem.

Zobrazit ukázku

Samozřejmě můžete použít ekvivalent Flash pro Internet Explorer a Opera, ale nutnost přidat a podporovat další komponentu může být daň. Doufejme, že tyto prohlížeče brzy přidají podporu pro nahrávání více souborů!