¿Cómo arrastrar y soltar archivos adjuntos en el navegador?

Question

Parece que Gmail está comenzando esta característica, y no requiere la instalación de ningún complemento, etc.

Funciona tanto en Firefox como en Chrome, pero no en IE.

Answer 1

Está utilizando la API de arrastrar y soltar HTML5.

http://html5doctor.com/native-drag-and-drop/

Answer 2

Están utilizando una de las características de HTML5. IE no es compatible con HTML 5 o estándares o ...

Here is a blog que explican el arrastre y la caída razonablemente bien.

Answer 3

La API de arrastrar y soltar HTML5 está disponible en los navegadores de última generación, como dicen los demás.

Google Gears (un "complemento") puede agregar la funcionalidad arrastrar y soltar (sé que Google Wave usó engranajes al menos en la vista previa del desarrollador de Google Wave) para navegadores más antiguos (FF e IE). Tenga en cuenta que gears will not be supported forever

Answer 4

supongo que busca este http://www.plupload.com/

Answer 5

Uso dropzonejs.

Es una biblioteca liviana que admite la eliminación de archivos simplemente agregando la clase dropzone para formar elementos. Maneja los archivos con HTML5 e incluso muestra vistas previas de las imágenes que se incluyen en él. En los navegadores incompatibles, vuelve a un simple formulario de carga de archivos. Además: se ve bien.

¡Échale un vistazo!

Descargo de responsabilidad: wrote this library.

Answer 6

Vamos a resumir un ejemplo aquí antes de que todos los enlaces se rompen =)

Al arrastrar y soltar con el HTML5 DnD API, un archivo de formar su navegador de escritorio/archivo en el navegador:

• el objeto de devolución de llamada de evento drop tiene una propiedad dataTransfer.files
• que es un objeto HTML5 File APIFileList
• que contiene los objetos de la API de archivos File.

A partir de ahí, utilice File API para realizar la carga, que ya se ha cubierto en muchos otros lugares.

ejemplo completo:

<div id="file-drop" style="border:1px dashed black; height:300px; width:300px;">Drop files here!</div> 
<script> 
    var file_drop = document.getElementById('file-drop'); 
    file_drop.addEventListener(
    'dragover', 
    function handleDragOver(evt) { 
     evt.stopPropagation() 
     evt.preventDefault() 
     evt.dataTransfer.dropEffect = 'copy' 
    }, 
    false 
) 
    file_drop.addEventListener(
    'drop', 
    function(evt) { 
     evt.stopPropagation() 
     evt.preventDefault() 
     var files = evt.dataTransfer.files // FileList object. 
     var file = files[0]     // File  object. 
     alert(file.name) 
    }, 
    false 
) 
</script> 

Fiddle.

Esto alertará al nombre base del archivo (la ruta no se puede obtener desde el archivo API).

Por cierto, la otra forma básica en que puede obtener el objeto File es mediante el atributo .files IDL de input type=file. Este método es más amigable para pantallas pequeñas que DnD, donde necesita dos ventanas abiertas al mismo tiempo en buenas posiciones relativas. Por desgracia, parece que en la actualidad no es portátil para arrastrar y soltar en un input type=file: drag drop files into standard html file input

Fuente: http://www.html5rocks.com/en/tutorials/file/dndfiles/