JS 拖放图片 URL

Question

您好，我正在构建一个图片上传器，因此我可以将图片插入到我的博客文章中，我有一个表单可以完成所有图片上传，然后我通过保存到数据库的 URL 在创建文章页面中显示图片.我正在尝试做的是构建一个拖放功能以从页面中选择图像并在该图像上获取 url，以便我可以将其保存到数据库并将 url 保存到我的文章表中。所以我需要的是图像的 URL，当它被放到下拉框中时，我无法将 URL 保存在数据库中，以便在我的文章表中。这是我的代码，提前感谢您的帮助！

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);
}

Answer 1

试试这个：

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