Come trascinare e rilasciare il file allegato nel browser?

Question

Sembra che Gmail stia avviando questa funzione e non richiede l'installazione di alcun plug-in ecc.

Funziona sia in Firefox che in Chrome ma non in IE.

Answer 1

Sta utilizzando l'API di trascinamento e rilascio HTML5.

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

Answer 2

Stanno usando una delle caratteristiche di HTML5. IE non supporta HTML 5 o standard o ...

Here is a blog che spiega il trascinamento della selezione ragionevolmente bene.

Answer 3

HTML5 drag and drop API è disponibile nei browser all'avanguardia come gli altri hanno detto.

Google Gears (un "plug-in") può aggiungere la funzionalità drag'n'drop (so che Google Wave ha utilizzato gli ingranaggi almeno nell'anteprima di Google Wave dev) per i browser meno recenti (FF e IE). Si noti che gears will not be supported forever

Answer 4

Suppongo che siete alla ricerca di questo http://www.plupload.com/

Answer 5

Usa dropzonejs.

È una libreria leggera che supporta il rilascio di file semplicemente aggiungendo la classe dropzone per formare elementi. Gestisce i file con HTML5 e mostra persino le anteprime delle immagini scartate in esso. Nei browser incompatibili ricade in un semplice modulo di caricamento file. Inoltre: sembra buono.

Dai un'occhiata!

Disclaimer: Ho scritto questa libreria.

Answer 6

Riassumiamo un esempio qui prima tutti quei link rompono =)

Quando si trascina e rilascia con la HTML5 DnD API, un file di formare il vostro browser desktop/file nel browser:

• l'oggetto callback dell'evento drop ha una proprietà
• che è un HTML5 File APIFileList oggetto
• che contiene oggetti API file File.

Da lì in poi, utilizzare l'API File per eseguire l'upload, che è già stato coperto in molti altri posti.

esempio completa:

<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.

Questo avviserà il file basename (il percorso non può essere ottenuto dall'API del file).

BTW, l'altro modo di base è possibile ottenere File oggetto è attraverso l'attributo .files IDL di un input type=file. Questo metodo è più amichevole per i piccoli schermi rispetto a DnD, in cui sono necessarie due finestre aperte contemporaneamente in buone posizioni relative. Purtroppo, sembra che attualmente non è portatile per trascinare in un input type=file: drag drop files into standard html file input

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