Selección múltiple y miniatura de imagen en JavaScript
Publicado por Ivan (5 intervenciones) el 22/01/2020 17:09:34
Estoy haciendo un ejercicio de clase, el enunciado es este
Desarrolla una pequeña aplicación Web que contenga un input de tipo file con selección múltiple y una división donde se puedan arrastrar archivos. Independientemente de qué método se escoja para seleccionar archivos, bien por el input o bien arrastrándolos a la zona destinada a ello, solo se seleccionarán aquellos de tipo imagen mostrando una miniatura de las mismas (máximo tamaño 300) y justo debajo de ésta, a modo de información, su nombre y tamaño.
Esto hecho esto, la cosa es, como hago una selección múltiple y una minuatura de la imagen con la información que pide?
Archivo JS
HTML
Desarrolla una pequeña aplicación Web que contenga un input de tipo file con selección múltiple y una división donde se puedan arrastrar archivos. Independientemente de qué método se escoja para seleccionar archivos, bien por el input o bien arrastrándolos a la zona destinada a ello, solo se seleccionarán aquellos de tipo imagen mostrando una miniatura de las mismas (máximo tamaño 300) y justo debajo de ésta, a modo de información, su nombre y tamaño.
Esto hecho esto, la cosa es, como hago una selección múltiple y una minuatura de la imagen con la información que pide?
Archivo JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function allowDrop(ev) {
ev.preventDefault();
}function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
testing();
}function testing() {
var correcto = 1;var pokes = document.getElementsByClassName("pokemon");
for (var i = 0; i < pokes.length; i++) {
if (pokes[i].getAttribute("name") != pokes[i].parentNode.getAttribute("id")) {
correcto = correcto * 0;
break;
} }if (correcto == 1) {
document.getElementById("resultado").innerHTML = "CORRECTO";
} else {
document.getElementById("resultado").innerHTML = "INCOMPLETO";
}}HTML
1
2
3
4
5
6
7
8
9
10
11
<section id="container" ondrop="drop(event)" ondragover="allowDrop(event)">
<div class="padre">
<div class="tipo" id="fuego" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="tipo" id="agua" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<img class="pokemon" src="charizar.png" draggable="true" ondragstart="drag(event)" id="drag1" name="fuego" />
<img class="pokemon" src="squirtle.jpg" draggable="true" ondragstart="drag(event)" id="drag2" name="agua" />
<img class="pokemon" src="ponyta.png" draggable="true" ondragstart="drag(event)" id="drag3" name="fuego" />
<img class="pokemon" src="totodile.jpg" draggable="true" ondragstart="drag(event)" id="drag4" name="agua" />
</section>
<div id="resultado">...</div>
Valora esta pregunta
0
