Détecter le fichier local drag'n'drop avec HTML / JavaScript

Il y a un HTML textarea. Je suis capable d'attraper cet événement lorsqu'un fichier local est déplacée dans le textarea. Mais comment obtenir le nom du fichier déposé? (Être modifié, et inséré dans le textarea enfin.)

Les expressions suivantes retourne Aucun dans ce cas:

event.dataTransfer.files
event.dataTransfer.getData('text/plain')

J'ai fait un petit exemple pour Firefox 3 c'est ma plate-forme cible actuellement.

<script>
function init() {
    document.getElementById('x').addEventListener('drop', onDrop, true)
}
function onDrop(event) {
    var data = event.dataTransfer.getData('text/plain')
    event.preventDefault()
    alert('files: ' + event.dataTransfer.files + ' && data: ' + data + '.')
}
</script>

<body onload='init()'>
<textarea cols=70 rows=20 id='x'></textarea>

source d'informationauteur Pavel Vlasov | 2010-01-07

  1. 13

    C'est un peu tardive mais je pense que ce que vous cherchez est: est-ce

    event.dataTransfer.files[0].name

    Vous pouvez également obtenir les propriétés suivantes:

    event.dataTransfer.files[0].size
event.dataTransfer.files[0].type

    Et vous pouvez loop thru ces fichiers avec les éléments suivants:

    var listOfNames='';
for(var i=0,tot=event.dataTransfer.files.length; i<tot; i++){
    listOfNames+=event.dataTransfer.files[i].name + '\r\n';
}

    Btw, si vous utilisez jQuery, la dataTransfer objet peut être trouvé ici:

    event.originalEvent.dataTransfer.files[0].name
  2. 4

    Ne sais pas si c'est toujours d'actualité, mais je me suis confronté au même problème. Voici comment je l'ai résolu:

    1. Créer un envoi normal formulaire avec un seul champ de saisie (type="file")

    2. Ajouter cet attribut HTML dans le champ de saisie:

      dropzone="copie de fichier:image/png fichier:image/jpg fichier:image/jpeg"

    3. Ensemble JQuery auditeur ou n'importe quoi d'attraper la "goutte d'eau"-événement sur le champ de saisie

    Lorsque vous drag & drop une image locale sur le champ de saisie, l'attribut "value" est rempli automatiquement et vous pouvez les traiter comme tout autre formulaire HTML.

    J'ai aussi enveloppé le formulaire dans un autre élément HTML (div), de définir la taille de la div et de définir overflow:hidden via les feuilles de style CSS de cette façon, vous pouvez vous débarrasser de la "browse" bouton. Ce n'est pas agréable, mais il fonctionne. J'ai aussi utilisé la AjaxForm plugin pour télécharger l'image en arrière - plan- fonctionne très belle.

  3. 0

    autant que je sache, vous avez besoin pour obtenir une instance de nsIFile afin d'obtenir le chemin d'accès du fichier (le File classe n'offre pas cette fonctionnalité).

    Cette MDC page explique comment faire: https://developer.mozilla.org/En/DragDrop/Recommended_Drag_Types#file.

    Notez que, bien que ne figurant pas dans le lien précédent, l'obtention d'une nsIFile instance nécessite des privilèges d'escalade (cf. ma réponse à Puis-je faire glisser des fichiers depuis le bureau jusqu'à une zone de dépôt dans Firefox 3.5 et initier un téléchargement? montrer comment faire cela).

  4. 0

    im de le faire par la détection du passage de la souris et mousedown sur la "Drop zone"

  5. -2

    Alemjerus est correct, vous n'avez pas accès à ce que vous recherchez.

    Le comportement que vous avez mentionné en réponse à son commentaire est le comportement par défaut de certains navigateurs. Par exemple, avec la stackoverflow textarea pour cette entrée, si j'utilise Safari et faites glisser un fichier dans elle, elle met le chemin du fichier dans le textarea. Avec firefox 3.5, d'autre part, il tente d'ouvrir le fichier avec le navigateur.

    Fondamentalement, le "drag and drop" à la fonctionnalité que vous tentez de mettre en œuvre est quelque chose des thats gérées par le navigateur et l'OS sur la machine du client -- vous ne pouvez pas utiliser le Javascript pour ce but.

  6. -3

    Vous ne pouvez pas le faire avec Javascript pour des raisons de sécurité. VM Javascript n'ayant pas accès au système de fichier du système d'exploitation. Vous ne pouvez faire glisser et déposer du texte.