Obtenir l'URL de la ressource qui est glisser-déposer sur le champ

J'ai une page html avec un certain champ de saisie et je souhaite ajouter les fonctionnalités suivantes.

L'utilisateur devrait pouvoir faire glisser et déposer une ressource sur le champ. Le résultat de cette action devrait être que l'URL de la ressource apparaît dans le champ.

  • Comment puis-je empêcher la traînée sur un enfant, mais permettez-moi de faire glisser le parent?
  • Utilisation de jQuery UI glisser-déposer: modification de l'élément entraîné lors de la chute
  • Javascript ondrag, ondragstart, ondragend
  • L'événement déroulant HTML5 ne fonctionne pas à moins que Dragover ne soit manipulé
  • HTML5 Glisser-déposer getData () ne fonctionne que sur Drop Event dans Chrome?
  • Comment puis-je faire glisser plusieurs éléments en même temps avec JavaScript ou jQuery?
  • La ressource pourrait être un fichier local, ce qui entraîne un file:///home/me/document url like file:///home/me/document ou file://c:\windows-files\document.doc .

    La ressource pourrait également être une ressource Web, ce qui se traduit par une URL comme http://host.nl/document.doc ou même ftp://host.nl/document.doc , même si à ce stade, je ne suis pas vraiment intéressé par Ressources ftp. Je suppose une action de l'URL d'une page Web à partir de la barre d'adresse d'un navigateur Web ou d'une action différente d'un fichier sur la machine cliente, par exemple du bureau.

    Comme d'habitude pour les applications Web, je veux que cette fonctionnalité fonctionne sur la plupart des plates-formes. (Linux / Win / MacOS, Firefox / Chrome / Safari / IE / Opera)

    Le paradigme est html et JavaScript.

  • Quel est le but de la classe "no-js" HTML?
  • MVC AutoComplete EditorFor tout en utilisant Html.BeginCollectionItem
  • Pourquoi les propriétés d'entrée techniquement sérialisables ne sont-elles pas sérialisables?
  • Fichier HTML5 api, lecture dans un fichier xml / texte et affichage sur la page?
  • Avez-vous besoin de texte / javascript spécifié dans vos balises <script>?
  • Blur Img's & Div's en HTML en utilisant CSS
  • 3 Solutions collect form web for “Obtenir l'URL de la ressource qui est glisser-déposer sur le champ”

    Dans Firefox, vous pouvez utiliser file.mozFullPath. Cependant, cette variable ne se présente que dans Firefox et ne fonctionne pas dans Chrome ou Safari.

    Faire aux mesures de sécurité mises en place par tous les navigateurs modernes, il est impossible d'obtenir le véritable chemin complet d'un fichier traîné dans un navigateur.

    Tous les principaux navigateurs remplacent maintenant le chemin du fichier par "/ fakepath / 'FileName'" où 'FileName' est le nom du fichier que vous avez sélectionné.

    Vous pouvez toutefois encore faire glisser et déposer la fonctionnalité et obtenir JUST le nom de fichier du fichier que vous avez traîné dans le navigateur.

    Voici un jsfiddle d'une modification de la réponse à la question connexe notée dans les commentaires de la question

    http://jsfiddle.net/c7cqN/

    J'ai fait le code de Keith Abramo simple à lire et ajouté des changements de vue

    L'URL de glisser-déposer d'un autre navigateur ou d'un onglet pourrait être utilisée pour créer quelque chose comme les signets.

    Je le trouve utile!

     <!DOCTYPE HTML> <html> <head> <style> #uploadelement { display:none; position:absolute; top:0; left:0; right:0; bottom:0; opacity:0; } #showURL{ border:1px solid green; padding-left:4px; padding-right:4px; background-color: #aaa; border-radius: 5px; } </style> </head> <script> var entered = 0; window.onload = function() { // auto focus in input -> mean all is ready to get dragable URL document.getElementById('fileName').focus(); document.getElementById('getURL').ondragenter= function(){ entered++; document.getElementById('uploadelement').style.display='block'; } document.getElementById('getURL').ondragleave = function(){ entered--; if (!entered) document.getElementById('uploadelement').style.display='none'; } document.getElementById('uploadelement').onchange = function(){ if (this.value) { document.getElementById('fileName').value = this.value.replace(/^C:\\fakepath\\/i, ''); } } // ready for using URL as string value of input document.getElementById('showURL').onclick = function() { console.log( document.getElementById('fileName').value ); } } </script> <body > <div id = "getURL" > <form method="post" enctype="multipart/form-data" id="uploadform"> Things can be dragged and dropped here! <input type="text" id="fileName"/> <input type="file" id="uploadelement" name="dragupload[]" /> <span id="showURL">show URL</span> </form> </div> </body> </html> 
    JavaScript rend le site Web intelligent, beauté et facile à utiliser.