0

Estoy intentando recibir un fichero de extensión (.xlsx) por un input html que tiene este aspecto:

<input type="file" id="file" name="file" accept=".xlsx"/>
<button id="upload" class="btn btn-primary" onclick="ft_uploadFile()">Upload</button>

Esto tengo entendido que debo recibirlo usando "Js", y que cuando se pulse el botón "Upload", llamar a una función donde pueda obtener el fichero desde el input, pero no sé cómo hacerlo, he intentado lo siguiente:

function ft_uploadFile() {
    alert("Uploading file...");
    var file = document.getElementById("file").files[0];
    var formData = new FormData();
    formData.append("file", file);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/upload", true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert("File uploaded");
        }
    }
}

Pero cuando pulso el botón Upload, no pasa absolutamente nada.

1 respuesta 1

2

Puedes realizarlo de diferentes formas, lo que a mí me ha funcionado es lo siguiente:

En primera instancia creo unas funciones para mantenerlo fácil de leer y entendible, además de que va facilitar entender el funcionamiento del evento.

function init() {
  document.getElementById('file').addEventListener('change', handleFileSelect, false);
}

function handleFileSelect(event) {
  const reader = new FileReader()
  reader.onload = handleFileLoad;
  reader.readAsText(event.target.files[0])
}

function handleFileLoad(event) {
  console.log(event);
  document.getElementById('fileContent').textContent = event.target.result;
}

event.target.Files[0] es lo que contiene el archivo realmente, tal vez quieras validar que no esté vacío, o en su defecto, si aceptas más de 1 recorrerlo con un ciclo.

El HTML de referencia podría ser así:

<!DOCTYPE html>
<html>

<head>
  <script src="script.js"></script>
</head>

<body onload="init()">
  <input id="file" type="file" name="file" />
  <pre id="fileContent"></pre>
</body>

</html>
1
  • Tu respuesta podría mejorarse con información de apoyo adicional. Por favor, pulsa en editar para añadir más detalles, como citas o documentación, para que otros puedan confirmar que tu respuesta es correcta. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 5 may. 2022 a las 14:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.