Tengo un archivo HTML que tiene una zona de colocación para que alguien coloque un archivo y un javascript para procesar ese archivo. dragenter, dragover y otros eventos funcionan bien, pero el evento de soltar no detecta que se soltó un archivo en el área. ¿Algunas ideas?
arrastrar.js
let dropArea=document.getElementById("dropZone"); dropArea.addEventListener("drop",function() { console.log("File entered"); });índice.html
<!DOCTYPE html> <html> <head> <title>sample/title> <link rel="stylesheet" type="text/css" href="./style.css" media="screen" /> </head> <body> <h1>sample1 </h1> <h2>Enter target file name</h2> <input id="testForm"></input> <button id="myButton">scan</button> <div id="dropZone" class="dropZone" > <p>Drag your files here</p> </div> </body> </html> <script src="index.js"></script> <script src="drag.js"></script>Incluiré el archivo css también por motivos de continuidad. estilo.css
#dropZone{ background-color: rgb(150, 150, 252); color:black; text-align: center; width:300px; height:300px; }Hay 2 formas de registrar detectores de eventos en JavaScript:
element.oneventname = function(e) { ... }element.addEventListener("eventname", function(e) { ... });Está utilizando la opción 2, así que no incluya "on":
dropArea.addEventListener("drop", function() { console.log("File entered"); }); Otro problema:
Sus etiquetas de script pertenecen dentro de la etiqueta del cuerpo, justo antes del cierre:
... <script src="index.js"></script> <script src="drag.js"></script> </body> </html>