Get URL of resource that is drag-and-dropped on field

问题

I have an html page with a certain input field and I want to add the following functionality.

The user should be able to drag and drop a resource onto the field. The result of this action should be that the url of the resource appears in the field.

The resource could be a local file, resulting in a url like file:///home/me/document or file://c:\windows-files\document.doc.

The resource could also be a web resource, resulting in a url like http://host.nl/document.doc or even ftp://host.nl/document.doc, although at this point I'm not really interested in ftp resources. I'm assuming a dnd-action of a web-page url from the address bar of a web browser, or a dnd-action of a file on the client machine from e.g. the desktop.

As usual for web apps, I want this functionality to work on most platforms. (Linux/Win/MacOS, Firefox/Chrome/Safari/IE/Opera)

The paradigm is html and JavaScript.

回答1:

In Firefox you can use file.mozFullPath. However, this variable presents only in Firefox and don't work in Chrome or Safari.

回答2:

Do to security measures put in place by all modern browsers it is impossible to get the real full path of a file which has been drag and dropped into a browser.

All major browsers now replace the file path with "/fakepath/'FileName'" where 'FileName' is the name of the file you selected.

You can however still do drag and drop functionality and get JUST the file name of the file you dragged into the browser.

Here is a jsfiddle of a modification of the answer to the related question noted in the comments of the question

http://jsfiddle.net/c7cqN/

回答3:

i have done code of Keith Abramo simple to read and added view changes

Drag and dropp URL from other Browser or Tab could be used for create something like Bookmarks..

i find it useful!

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

来源：https://stackoverflow.com/questions/7820704/get-url-of-resource-that-is-drag-and-dropped-on-field

标签

javascript

html

url

drag-and-drop