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图片网址

回答

相关问题