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.

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.

  • Ajouter à l'historique du navigateur sans rechargement de page
  • Convertir l'URL blob en URL normal
  • Codage de window.location.hash
  • Utilisation de // dans une source <script>
  • JQuery if url hash, cliquez sur événement / activez javascript
  • Comment Google et Yahoo remplacent-ils l'URL dans la barre d'état du navigateur?
  • Recommandation pour la bibliothèque de manipulation d'URL JavaScript / API
  • Quel est l'effet du démarrage d'une URL avec "//", et la suppression de "http:"
  • 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.