Estoy tratando de cargar un archivo y arrastrar y soltar el archivo, pero solo el archivo de carga fue exitoso y la función de arrastrar y soltar no funcionó y no puedo resolverlo. A continuación se muestra mi código:
HTML
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <label for="file-input"> <i onclick="" class="material-icons md-36">upload_file</i> </label> <input onclick="uploadFiles()" id="file-input" type="file" multiple="true" accept=".docx,.pdf,.jpg,.jpeg,.png" />CSS
.material-icons.md-36 { font-size: 36px; color: #65daff; position: absolute; top: 47.6%; right: 16.67%; left: 11.67%; cursor: pointer; user-select: none; } #file-input { display: none; visibility: none; }JavaScript
function uploadFiles() { var files = document.getElementById("file-input").files; if (files.length == 0) { alert("Please first choose or drop any file"); return; } var filenames = ""; for (var i = 0; i < files.length; i++) { filenames += files[i].name + "\n"; } alert("Selected file: " + filenames); }Necesita tener un controlador de arrastrar y soltar. Este código está tomado del doc . Agregué un contenedor div al controlador de arrastrar y soltar. Dos eventos para manejar esto son ondrop para manejar la caída de archivos y ondragover solo para evitar el comportamiento predeterminado de arrastrar archivos
<div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);"> function uploadFiles() { var files = document.getElementById("file-input").files; if (files.length == 0) { alert("Please first choose or drop any file"); return; } var filenames = ""; for (var i = 0; i < files.length; i++) { filenames += files[i].name + "\n"; } alert("Selected file: " + filenames); } function dragOverHandler(ev) { console.log('File(s) in drop zone'); // Prevent default behavior (Prevent file from being opened) ev.preventDefault(); } function dropHandler(ev) { console.log('File(s) dropped'); // Prevent default behavior (Prevent file from being opened) ev.preventDefault(); if (ev.dataTransfer.items) { // Use DataTransferItemList interface to access the file(s) for (var i = 0; i < ev.dataTransfer.items.length; i++) { // If dropped items aren't files, reject them if (ev.dataTransfer.items[i].kind === 'file') { var file = ev.dataTransfer.items[i].getAsFile(); alert("Selected file: " + file.name); } } } else { // Use DataTransfer interface to access the file(s) for (var i = 0; i < ev.dataTransfer.files.length; i++) { console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name); } } } .material-icons.md-36 { font-size: 36px; color: #65daff; top: 47.6%; right: 16.67%; left: 11.67%; cursor: pointer; user-select: none; } #file-input { display: none; visibility: none; } #drop_zone { position: relative; background: #2D2D2D; padding: 10px; height: 50vw; width: 50vw; display: flex; justify-content: center; align-items: center; } <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);"> <label for="file-input"> <i onclick="" class="material-icons md-36">upload_file</i> </label> <input onclick="uploadFiles()" id="file-input" type="file" multiple="true" accept=".docx,.pdf,.jpg,.jpeg,.png" /> </div>