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

JS拖放图像URL

1 个答案: