Cómo agregar la carga de archivos a un formulario HTML

La carga de archivos es esencial para formularios de solicitud de empleo, envío de documentos y soporte tickets con archivos adjuntos y cualquier flujo de trabajo donde los usuarios necesiten enviar archivos junto con los datos de su formulario.

Esta guía cubre todo lo necesario para agregar la carga de archivos a un formulario HTML, desde el marcado básico hasta el manejo seguro.

Formulario de carga de archivos básico

Dos requisitos para la carga de archivos:

1. The form must have enctype="multipart/form-data"
2. The form must contain an <input type="file"> element

1
<form action="https://api.formsfort.com/submit" method="POST" enctype="multipart/form-data">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3

4
  <label for="name">Name</label>
5
  <input type="text" id="name" name="name" required />
6

7
  <label for="resume">Resume</label>
8
  <input type="file" id="resume" name="resume" />
9

10
  <button type="submit">Submit application</button>
11
</form>

Without enctype="multipart/form-data", the browser sends the form as application/x-www-form-urlencoded and the file data is not included. This is the most common mistake.

Restringir tipos de archivos

Use the accept attribute to limit which files the user can select:

1
<input type="file" name="document" accept=".pdf,.doc,.docx" />
2
<input type="file" name="photo" accept="image/*" />
3
<input type="file" name="spreadsheet" accept=".csv,.xlsx,.xls" />

The accept attribute only filters the file picker dialog. Users can still bypass it by selecting “All files.” Always validate file types on the server side.

Carga de múltiples archivos

Add the multiple attribute to allow selecting more than one file:

1
<label for="attachments">Attachments (up to 5 files)</label>
2
<input type="file" id="attachments" name="attachments" multiple accept=".pdf,.png,.jpg" />

Los archivos se envían como una matriz con el mismo nombre de campo. El backend de su formulario debe manejar varios archivos por campo.

Establece límites de tamaño de archivo

Sugerencia del lado del cliente

Add a hidden MAX_FILE_SIZE field as a hint to the browser (not enforced by all browsers):

1
<input type="hidden" name="MAX_FILE_SIZE" value="10485760" /> <input type="file" name="document" />

El valor está en bytes (10485760 = 10 MB).

Validación del lado del cliente con JavaScript

Para una verificación confiable del tamaño del lado del cliente:

1
document.querySelector('input[type="file"]').addEventListener("change", (e) => {
2
  const maxSize = 10 * 1024 * 1024;
3
  for (const file of e.target.files) {
4
    if (file.size > maxSize) {
5
      alert(`${file.name} is too large. Maximum size is 10MB.`);
6
      e.target.value = "";
7
      return;
8
    }
9
  }
10
});

Aplicación del lado del servidor

Siempre aplique límites de tamaño de archivo en el servidor o en el backend de formularios. Se pueden omitir las comprobaciones del lado del cliente.

Aplicar estilo a la entrada del archivo

La entrada de archivo predeterminada se ve diferente en todos los navegadores. Para una apariencia consistente, oculte la entrada nativa y use un botón personalizado:

1
<label class="file-upload-btn">
2
  <input type="file" name="document" hidden />
3
  Choose file
4
</label>
5
<span id="fileName">No file selected</span>
6

7
<script>
8
  document.querySelector('input[type="file"]').addEventListener("change", (e) => {
9
    const name = e.target.files[0]?.name ?? "No file selected";
10
    document.getElementById("fileName").textContent = name;
11
  });
12
</script>

1
.file-upload-btn {
2
  display: inline-flex;
3
  align-items: center;
4
  padding: 10px 20px;
5
  background: #059669;
6
  color: white;
7
  border-radius: 8px;
8
  cursor: pointer;
9
  font-weight: 600;
10
}
11
.file-upload-btn:hover {
12
  background: #047857;
13
}

Arrastre y suelte carga de archivos

Para una experiencia de carga moderna, agregue soporte para arrastrar y soltar:

1
<div id="dropZone" class="drop-zone">
2
  <p>Drag files here or click to browse</p>
3
  <input type="file" name="document" id="fileInput" hidden />
4
</div>
5

6
<script>
7
  const dropZone = document.getElementById("dropZone");
8
  const fileInput = document.getElementById("fileInput");
9

10
  dropZone.addEventListener("click", () => fileInput.click());
11

12
  dropZone.addEventListener("dragover", (e) => {
13
    e.preventDefault();
14
    dropZone.classList.add("dragover");
15
  });
16

17
  dropZone.addEventListener("dragleave", () => {
18
    dropZone.classList.remove("dragover");
19
  });
20

21
  dropZone.addEventListener("drop", (e) => {
22
    e.preventDefault();
23
    dropZone.classList.remove("dragover");
24
    fileInput.files = e.dataTransfer.files;
25
  });
26
</script>

Manejo seguro de carga de archivos

La carga de archivos introduce riesgos de seguridad. Siga estas prácticas:

Validar tipos MIME del lado del servidor

Do not trust the file extension or the Content-Type header sent by the browser. Check the actual file content (magic bytes) on the server.

Escanear en busca de malware

Los archivos cargados pueden contener malware. Utilice un backend de formularios que escanee los archivos antes de almacenarlos.

Limitar el tamaño de los archivos

Establecer límites de tamaño máximo de archivo para evitar ataques de denegación de servicio a través de cargas grandes.

Restringir los tipos permitidos

Acepte solo los tipos de archivos que su formulario realmente necesita. No permita archivos ejecutables (.exe, .sh, .bat).

Almacena archivos de forma segura

Almacene los archivos cargados fuera de la raíz web o en el almacenamiento en la nube con URL firmadas. Nunca entregue archivos cargados directamente desde un directorio público.

Carga de archivos AJAX con progreso

Para una mejor experiencia de usuario, cargue archivos a través de AJAX con un indicador de progreso:

1
document.querySelector("form").addEventListener("submit", async (e) => {
2
  e.preventDefault();
3
  const form = e.target;
4
  const formData = new FormData(form);
5

6
  const xhr = new XMLHttpRequest();
7
  xhr.open("POST", form.action);
8

9
  xhr.upload.addEventListener("progress", (e) => {
10
    if (e.lengthComputable) {
11
      const percent = Math.round((e.loaded / e.total) * 100);
12
      document.getElementById("progress").textContent = `${percent}%`;
13
    }
14
  });
15

16
  xhr.addEventListener("load", () => {
17
    if (xhr.status === 200) {
18
      document.getElementById("status").textContent = "Upload complete.";
19
    } else {
20
      document.getElementById("status").textContent = "Upload failed.";
21
    }
22
  });
23

24
  xhr.send(formData);
25
});

Resumen

To add file upload to an HTML form, set enctype="multipart/form-data" on the form element and add an <input type="file"> with appropriate accept restrictions. Validate file types and sizes on both the client and server side. Use a form backend service that supports file uploads, MIME validation, and malware scanning for secure handling.