Subir archivo en JavaScript con ejemplo
- Ejemplo de carga de archivo usando JavaScript en HTML
- Forma alternativa de cargar/seleccionar archivos usando JavaScript
Este artículo explica cómo podemos seleccionar un archivo del cuadro de diálogo del selector de archivos y cargar el archivo seleccionado en nuestro servidor usando el método fetch. Necesitamos agregar nuestros datos de archivo seleccionados en un objeto de datos de formulario para cargar cualquier archivo en nuestro almacenamiento de servidor back-end.
let formData = new FormData();
formData.append('file', fileupload.files[0]);
Ejemplo de carga de archivo usando JavaScript en HTML
Crearemos un formulario de entrada de tipo file para seleccionar un archivo de cualquier extensión desde el almacenamiento de nuestra PC/sistema. Habrá un botón para llamar a una función uploadFile() esa función agregará datos de archivo en el objeto de datos de formulario y simplemente cargará esos datos de formulario en nuestro servidor usando el método de búsqueda. El método fetch se usa en JavaScript para solicitudes de red como llamadas API para obtener O cargar cualquier dato desde el front-end hasta el back-end.
<!DOCTYPE html>
<html>
<head>
<title>
HTML | File upload example
</title>
<script type="text/javascript">
</script>
</head>
<body>
<h2>Hi Users Choose your file and Click upload.</h2>
<!-- Input Form Elements HTML 5 -->
<input id="fileupload" type="file" name="fileupload" />
<button id="upload-button" onclick="uploadFile()"> Upload file </button>
<!-- File Upload Logic JavaScript -->
<script>
async function uploadFile() {
//creating form data object and append file into that form data
let formData = new FormData();
formData.append("file", fileupload.files[0]);
//network request using POST method of fetch
await fetch('PASTE_YOUR_URL_HERE', {
method: "POST",
body: formData
});
alert('You have successfully upload the file!');
}
</script>
</body>
<html>
En la fuente de la página HTML anterior, puede ver el tipo de formulario de entrada simple de file para obtener los datos del archivo del almacenamiento del sistema local del usuario haciendo clic en choose archivo, y hay un botón Upload file para llamar a nuestro función declarada y continuar con la funcionalidad.
En esta página web frontal, también puede ver el nombre con la extensión de su archivo seleccionado.
Aquí puede ver las etiquetas <script>, que son necesarias para usar declaraciones javaScript en doctype html. En esas etiquetas, hemos declarado uploadFile().
La función contiene un objeto de datos de formulario, y el archivo se agregará a ese objeto de datos de formulario y llamará a la solicitud de red con el método fetch POST; los datos del archivo se enviarán en el cuerpo del formulario de solicitud de red.
En el siguiente paso, function() muestra un cuadro de alerta al usuario You have successfully upload the file! si el archivo se carga correctamente.
Forma alternativa de cargar/seleccionar archivos usando JavaScript
También puede lograr el mismo resultado como se muestra a continuación. Puede crear un elemento con type=“file” utilizando el método document.createElement()
Simplemente podemos acceder a un elemento <input> con type="file" utilizando el método getElementById().
var data = document.getElementById('my_file');
<button onclick="myFunction()">Choose file</button>
<script>
function myTestFunction() {
var data = document.createElement("INPUT");
data.setAttribute("type", "file");
document.body.appendChild(data);
}
</script>
En los ejemplos anteriores, var data asignado con un document.createElement("INPUT"); función, donde necesitamos establecer el atributo de los datos con el tipo de archivo.
En el siguiente paso, necesitamos appendChild con datos en document.body.