JS Drag and Drop圖片網址

嗨我正在構建圖片上傳器，以便我可以將圖片插入到我的博客文章中，我有一個表單可以完成所有圖片上傳，然後我在創建文章頁面中顯示圖片通過URL保存到數據庫。我想要做的是建立一個拖放，從頁面中選擇圖像，ondrop獲取該圖像的URL，以便我可以將其保存到數據庫中，並將URL保存到我的文章表中。所以我需要的是圖像的URL，當它放在下拉框中時，這樣我就不能將我的文章表中的url保存到數據庫中。下載我的代碼，感謝您提前提供任何幫助！JS Drag and Drop圖片網址

PHP/HTML

$sql = "SELECT * FROM images"; 
    $i = 0; 

    if($data = query($sql)) { 

     while($image = mysqli_fetch_array($data)) { 
     ?> 
     <div class="layout-column four"> 
      <img id="drag<?php echo $i++ ?>" src="<?php echo $image['file_name']?>" alt="<?php echo $image['description'] ?>" ondragstart="drag(event)"> 
     </div> 
     <?php 

    } 

<div id="drop" class="layout-column twelve" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

JAVASCRIPT

function allowDrop(ev) 
{ 
ev.preventDefault(); 
} 

function drag(ev) 
{ 
ev.dataTransfer.setData("Text",ev.target.id); 
} 

function drop(ev) 
{ 
ev.preventDefault(); 
var data=ev.dataTransfer.getData("Text"); 
ev.target.appendChild(document.getElementById(data)); 

var drop = document.getElementById('drop'); 
document.write(drop); 
}

來源

2013-02-11 i092173

試試這個：

function drop(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 
    var imageUrl = evt.dataTransfer.getData('text/html'); 

    var rex = /src="?([^"\s]+)"?\s*/; 
    var url, res; 

    url = rex.exec(imageUrl); 
    alert(url[1]); 
}

DEMO

來源

2014-02-09 10:51:47 laaposto

這正是我想要的......但它給編碼形式當（.gif）fi時le drop ... – 2014-03-24 11:47:03

@ime你能否爲我提供一個帶圖片的示例頁面？ – laaposto 2014-03-24 11:52:49

對不起，這是midtake ....還有一件事，如果我們改變正則表達式爲（/ \ ssrc =「？（[^」\ s] +）「？\ s * /）..它會更好，因爲在谷歌圖片中還有其他的信息有'src ='，所以我們必須得到只有src纔有空間... :) – 2014-04-04 04:44:28

JS Drag and Drop圖片網址

回答

相關問題