Skip to content

Instantly share code, notes, and snippets.

@UlisesGascon

UlisesGascon/file_html5.html

Created November 8, 2015 23:54
Show Gist options
  • Save UlisesGascon/b3ca6862acd94693a8fc to your computer and use it in GitHub Desktop.
Save UlisesGascon/b3ca6862acd94693a8fc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
file_html5.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>File HTML5</title>
<meta charset=utf-8>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<style type="text/css">
#contenedor {
width: 360px;
}
#drop-panel {
border: 2px dashed #ddd;
height: 100px;
}
#text-arrastrar {
padding-top: 20px;
}
</style>
</head>
<body>
<div id="contenedor" class="container">
<header>
<h3>Manejando Archivos
<small> File API </small>
</h3>
<hr>
</header>
<div id="drop-panel" class="panel panel-default">
<div class="panel-body" id="areaAterrizaje">
<p id="text-arrastrar" class="text-center"><b>Arrastra Archivos aquí</b>
</p>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<form>
<input id="subirArchivos" type="file" multiple>
</form>
</div>
</div>
<hr>
<div id="listaArchivos">
<div class="panel panel-default">
<div class="panel-body">
Todavía no hay archivos seleccionados
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<script type="text/javascript">
(function() {
var subirArchivos = document.getElementById("subirArchivos");
var areaAterrizaje = document.getElementById("areaAterrizaje");
var listaArchivos = document.getElementById("listaArchivos");
function recorrerArchivos(archivos) {
listaArchivos.innerHTML = "";
for (var i = 0; i < archivos.length; i++) {
var div = document.createElement("div");
var archivo = archivos[i];
var infoArchivo = '<div class="panel panel-info">';
infoArchivo += '<div class="panel-heading"><b>' + archivo.name + '</b></div>';
infoArchivo += '<div class="panel-body"';
infoArchivo += '<p><b>Tipo: </b>' + archivo.type + '</p>';
infoArchivo += '<p><b>Tamaño: </b>' + bytesToSize(archivo.size) + '</p>';
infoArchivo += '<p><i>Tamaño Real: </i>' + archivo.size + ' bytes </p>';
infoArchivo += '</div></div>';
div.innerHTML = infoArchivo;
listaArchivos.appendChild(div);
}
}
subirArchivos.onchange = function() {
recorrerArchivos(this.files);
};
areaAterrizaje.ondragenter = function() {
return false;
};
areaAterrizaje.ondragover = function() {
return false;
};
areaAterrizaje.ondrop = function(evt) {
recorrerArchivos(evt.dataTransfer.files);
return false;
};
/**
* function bytesToSize by Aliceljm
* in http://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-bytes-to-kb-mb-gb-in-javascript
*/
function bytesToSize(bytes) {
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
if (bytes == 0) return '0 Byte';
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10);
return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
}
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment