> Manuales > Taller de HTML5

Complementamos lo expuesto en el artículo anteriormente publicado: Lectura de archivos en HTML (File API)

 
Nos basamos en todo lo allí comentado extendiendo su funcionalidad, con nuevas capacidades de arrastrar y soltar (drag & drop) archivos de imagen. Se trata de una continuación de lo allí descrito y así debe tomarse, por lo cual recomendamos leer primero el artículo precedente.


 

Arrastrar y soltar imágenes (drag & drop)

Para gestionar, arrastrar y soltar un elemento sobre una determinada área –que podría ser toda la ventana, aunque nosotros lo acotaremos al área <div> creada para ello-, hemos de capturar los tres posibles eventos: A nosotros no nos interesa que acontezca nada en los dos primeros casos, por lo cual creamos una función de respuesta -ignoreDrag- que parará la propagación del evento y evitará que se ejecute cualquier tipo de respuesta por defecto.

En el caso de ser soltado, la función llamada -drop-, realiza esencialmente lo que sigue:

  1. Frena la propagación del evento, como antes dijimos.
  2. Detiene cualquier otra acción por defecto.
  3. Llama a la función de procesamiento de archivos, como si se hubiera cargado el archivo desde una caja de diálogo.
Listado 4: Activación de las funciones de arrastrar y soltar (drag & drop).

var dropBox;

window.onload = function() {
dropBox = document.getElementById("fileOutput");
dropBox.ondragenter = ignoreDrag;
dropBox.ondragover = ignoreDrag;
dropBox.ondrop = drop;
}

function ignoreDrag(e) {
e.stopPropagation();
e.preventDefault();
}

function drop(e) {
e.stopPropagation();
e.preventDefault();

var data = e.dataTransfer;
var files = data.files;

processFiles(files);
}

Teóricamente, debería actuar, sin más, como una especie de conector en nuestro código anterior; desafortunadamente, el soporte dado para ello dista algo de ser el esperado, siendo muy crítico sobre todo trabajando sin conexión –permisos de acceso-.

En el Listado 5 se recoge un ejemplo sencillo, aplicado a una lectura de archivos de imágenes, sin comprobaciones de compatibilidad ni adornos de ninguna clase, pero plenamente funcional.

Listado 5: Ejemplo de lectura de un archivo de imagen, con soporte de arrastrar y soltar (drag & drop).

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<title>Leer archivo de imagen, con capacidades drag & drop</title>

<style>
div {
margin-top: 30px;
border: solid 1px black;
padding: 5px;
width: 300px;
height: 300px;
background: lightyellow;
background-size: 100%;
background-repeat: no-repeat;
text-align: center;
}
</style>

<script>

function processFiles(files) {
var file = files[0];

var reader = new FileReader();

reader.onload = function (e) {
// Cuando éste evento se dispara, los datos están ya disponibles.
// Se trata de copiarlos a una área <div> en la página.
var output = document.getElementById("fileOutput");
fileOutput.style.backgroundImage = "url('" + e.target.result + "')";
};
reader.readAsDataURL(file);
}

// ---------------------------------------
var dropBox;

window.onload = function() {
dropBox = document.getElementById("fileOutput");
dropBox.ondragenter = ignoreDrag;
dropBox.ondragover = ignoreDrag;
dropBox.ondrop = drop;
}

function ignoreDrag(e) {
e.stopPropagation();
e.preventDefault();
}

function drop(e) {
e.stopPropagation();
e.preventDefault();

var data = e.dataTransfer;
var files = data.files;
   
processFiles(files);
}
// ----------------------------------------

</script>
</head>

<body>
<input id="fileInput" type="file" size="50" onchange="processFiles(this.files)">
<div id="fileOutput"></div>
</body>
</html>


 

Jaime Peña Tresancos

Escritor. Colaborador habitual de revistas de tecnología y experto en nuevas tec...

Manual