Comment faites glisser et déposez le fichier de pièce jointe dans le navigateur?

Résumons un exemple ici avant tous ces liens briser =)

Lorsque vous faites glisser et déposez les HTML5 Mdn API, une forme de fichiers de votre bureau /navigateur de fichiers dans le navigateur:

• la drop de rappel d'événement objet a une dataTransfer.files propriété
• qui est un HTML5 Fichier API FileList objet
• qui contient le Fichier API File objets.

À partir de là, utilisez le Fichier API pour effectuer le téléchargement, qui a déjà été couvert dans de nombreux autres endroits.

Exemple complet:

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

Violon.

Cette alerte le fichier basename (chemin d'accès ne peuvent pas être obtenues à partir du fichier API).

BTW, l'autre de base de la façon dont vous pouvez obtenir File objet est par le biais de la .files IDL attribut d'un input type=file. Cette méthode est plus convivial pour les petits écrans du Mdn, où vous avez besoin de deux fenêtres ouvertes en même temps à de bonnes positions relatives. Malheureusement, il semble qu'actuellement, il n'est pas portable pour faire glisser et déposez-les dans un input type=file: glisser-déposer des fichiers dans un fichier html standard d'entrée

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

Ils sont à l'aide de l'un de HTML5 ses caractéristiques. IE ne prend pas en charge le HTML 5 ou de normes ou...

Voici un blog qui explique le glisser-déposer raisonnablement bien.

Je suppose que vous êtes à la recherche pour cette http://www.plupload.com/