Cómo hacer un simple formulario de envío de archivos de arrastrar y soltar con jQuery y HTML5

Si ya está utilizando jQuery, ¿por qué no usaría un complemento existente? Seguramente sería más eficiente.

Una popular con la que tengo experiencia personal es Dropzone.js [1].

Ahora, si desea escribir el suyo propio y es la única razón por la que está usando jQuery, podría hacerlo con JavaScript y HTML5 antiguos. Lo unico real La razón por la que necesitaría jQuery es si tuviera que admitir navegadores mucho más antiguos.

No le voy a dar el código, ya que hay muchas formas de hacerlo, pero más o menos querrá buscar enlaces en varios eventos del elemento de entrada del archivo HTML como:

  • cambio
  • dragover
  • dragleave
  • soltar

Hay un tutorial bastante bueno de HTML Rocks [2] que explica los detalles de cómo crear uno propio con el objetivo de señalarle un tutorial significativo, esclarecedor y generalmente válido.

Como con la mayoría de las cosas en estos días, si todo lo que necesita es alguna funcionalidad como esta y no necesita admitir navegadores antiguos, no hay razón para traer jQuery.

Notas al pie

[1] Dropzone.js

[2] Lectura de archivos en JavaScript utilizando las API de archivo – Rocas HTML5