获取拖放到字段上的资源的 URL

发布于 2024-12-11 04:36:00 字数 541 浏览 0 评论 0原文

我有一个带有特定输入字段的 html 页面，我想添加以下功能。

用户应该能够将资源拖放到字段上。此操作的结果应该是该资源的 url 出现在该字段中。

该资源可以是本地文件，导致类似于 file:///home/me/document 或 file://c:\windows-files\document.doc 的 url代码>.

该资源也可以是 Web 资源，导致类似于 http://host.nl/document.doc 甚至 ftp://host.nl/document.doc 的 url code>，尽管此时我对 ftp 资源并不真正感兴趣。我假设从网络浏览器的地址栏执行网页 url 的 dnd 操作，或者从桌面等客户端计算机上执行文件的 dnd 操作。

与网络应用程序一样，我希望此功能能够在大多数平台上运行。（Linux/Win/MacOS、Firefox/Chrome/Safari/IE/Opera）

范例是 html 和 JavaScript。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

晨与橙与城 2024-12-18 04:36:00

在 Firefox 中，您可以使用 file.mozFullPath。
但是，此变量仅在 Firefox 中出现，在 Chrome 或 Safari 中不起作用。

回复收藏 0 原文

洋洋洒洒 2024-12-18 04:36:00

根据所有现代浏览器采取的安全措施，不可能获得拖放到浏览器中的文件的真实完整路径。

现在，所有主流浏览器都将文件路径替换为“/fakepath/'FileName'”，其中“FileName”是您选择的文件的名称。

但是，您仍然可以执行拖放功能并仅获取拖到浏览器中的文件的文件名。

评论中指出的相关问题的答案进行修改的 jsfiddle

这是对问题http://jsfiddle.net 的 /c7cqN/

回复收藏 0 原文

写给空气的情书 2024-12-18 04:36:00

我已经完成了 Keith Abramo 的代码，易于阅读并添加了视图更改，

从其他浏览器或选项卡拖放 URL 可用于创建书签之类的东西..

我发现它很有用！

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

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 原文

~没有更多了~