HTML5: File API

Selecione e efectue upload de ficheiros apenas em uma acção com Ctrl (Windows, Linux) ou Comando (Mac) ao clicar nos mesmos no diálogo de ficheiro.

Código utilizado na página:

<h3>Selecione Ficheiro(s)</h3>
<p>
<input id="files-upload" type="file" multiple>
</p>
<p id="drop-area">
ou arraste e largue os ficheiros aqui
</p>
				
<h3>Ficheiros Enviados</h3>
<ul id="file-list">
<li class="no-items">(sem ficheiros enviados até agora)</li>
</ul>

Função:

<script>
(function () {
	var filesUpload = document.getElementById("files-upload"),
		dropArea = document.getElementById("drop-area"),
		fileList = document.getElementById("file-list");
	
	function traverseFiles (files) {
		var li,
			file,
			fileInfo;
		fileList.innerHTML = "";
			
		for (var i=0, il=files.length; i<il; i++) {
			li = document.createElement("li");
			file = files[i];
			fileInfo = "<div><strong>Nome:</strong> " + file.name + "</div>";
			fileInfo += "<div><strong>Tamanho:</strong> " + file.size + " bytes</div>";
			fileInfo += "<div><strong>Tipo:</strong> " + file.type + "</div>";
			li.innerHTML = fileInfo;
			fileList.appendChild(li);
		};
	};
	
	filesUpload.onchange = function () {
		traverseFiles(this.files);
	};
	
	dropArea.ondragenter = function () {
		return false;
	};
	
	dropArea.ondragover = function () {
		return false;
	};
	
	dropArea.ondrop = function (evt) {
		traverseFiles(evt.dataTransfer.files);
		return false;
	};
	
})();
</script>