Question

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

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

资源可以是本地文件，从而生成file:///home/me/document或file://c:\windows-files\document.doc等网址。

资源也可以是一个网络资源，产生一个类似http://host.nl/document.doc甚至ftp://host.nl/document.doc的网址，尽管此时我对ftp资源并不感兴趣。我假设来自网络浏览器的地址栏的网页网址的动作，或者客户端机器上的文件的动作来自例如网页浏览器的地址栏。桌面。

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

范例是html和JavaScript。

Answer 1

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

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

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

这是对问题评论中提到的相关问题答案的修改的方法

http://jsfiddle.net/c7cqN/

Answer 2

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

Answer 3

我已经完成了Keith Abramo的简单阅读和添加了视图更改的代码

从其他浏览器或Tab中拖放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>

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

3 个答案: