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

前端未结

关注

 3  1346

借酒劲吻你

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

相关标签:

3条回答

独厮守ぢ

2020-12-31 14:01

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

0 讨论(0)
发布评论:

提交评论
- 加载中...
时光说笑

2020-12-31 14:12

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/

0 讨论(0)
发布评论:

提交评论
- 加载中...

攒了一身酷

2020-12-31 14:12

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>

0 讨论(0)