Получить URL ресурса, который перетаскивается на поле - PullRequest
Новая
       1

Получить URL ресурса, который перетаскивается на поле

10 голосов
/ 19 октября 2011

У меня есть HTML-страница с определенным полем ввода, и я хочу добавить следующую функциональность.

Пользователь должен иметь возможность перетаскивать ресурс на поле.В результате этого действия должен появиться URL ресурса в поле.

Ресурсом может быть локальный файл, в результате чего URL будет иметь вид file:///home/me/document или file://c:\windows-files\document.doc.

* 1008.* Ресурс также может быть веб-ресурсом, в результате чего URL-адрес будет выглядеть как http://host.nl/document.doc или даже ftp://host.nl/document.doc, хотя на данный момент я не особо заинтересован в ресурсах ftp.Я предполагаю dnd-действие URL веб-страницы из адресной строки веб-браузера или dnd-действие файла на клиентском компьютере, например, с рабочего стола.

Как обычно для вебаприложения, я хочу, чтобы эта функциональность работала на большинстве платформ.(Linux / Win / MacOS, Firefox / Chrome / Safari / IE / Opera)

Парадигма HTML и JavaScript.

Ответы [ 3 ]

3 голосов
/ 28 октября 2011

В Firefox вы можете использовать file.mozFullPath.Однако эта переменная представлена ​​только в Firefox и не работает в Chrome или Safari.

3 голосов
/ 25 октября 2011

В соответствии с мерами безопасности, установленными всеми современными браузерами, невозможно получить реальный полный путь к файлу, который был перетащен в браузер.

Все основные браузеры теперь заменяют путь к файлу на "/ fakepath / 'FileName'", где "FileName" - это имя выбранного вами файла.

Однако вы все равно можете выполнять перетаскиваниеи получите просто имя файла, который вы перетащили в браузер.

Вот jsfiddle модификации ответа на соответствующий вопрос, отмеченный в комментариях к вопросу

http://jsfiddle.net/c7cqN/

1 голос
/ 17 сентября 2014

я сделал код Кейта Абрамо простым для чтения и добавил изменения вида

Перетаскивание 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...