拖放事件.dataTransfer.files为空

每次在div中放入图像时，我都会尝试收集数据。我的服务器接收到空数据，甚至一件事都没有。我所需要的只是显示图像名称"绿色玻璃箭头.png"。你可以在"控制台"里看到它我做错了什么？请帮忙！你可以在这里看到的例子

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));
console.log(event.dataTransfer.files);
}

最终结果。使用JavaScrip AJAX到PHP将拖放图像数据传输到MySql

已编辑代码

<script>
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 ele = document.getElementById(data);    
    console.log(document.getElementById(data).name); 
    ajax_post(ele);
}
// ----AJAX Post to PHP----->
function ajax_post(ele){
    // Create our XMLHttpRequest object
    var hr = new XMLHttpRequest();
    // Create some variables we need to send to our PHP file
    var url = "insert.php";
    var imgName = ele.name;
    var imgId = ele.id;
    var vars = "imgName="+imgName+"&imgId="+imgId;
    hr.open("POST", url, true);
    // Set content type header information for sending url encoded variables in the request
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    // Access the onreadystatechange event for the XMLHttpRequest object
    hr.onreadystatechange = function() {
            if(hr.readyState == 4 && hr.status == 200) {
                    var return_data = hr.responseText;
                        document.getElementById("status").innerHTML = return_data;
            }
    }
    // Send the data to PHP now... and wait for response to update the status div
    hr.send(vars); // Actually execute the request
    document.getElementById("status").innerHTML = "processing...";
}    
</script>

PHP代码"insert.PHP"

<?php
    $con = mysqli_connect('localhost','root','your_password');
    if(!$con) {
        echo 'Not Connected To Server';
    }
    if(!mysqli_select_db($con, 'your_table')) {
        echo 'Database Not Selected';
    }
    $imgName = $_POST['imgName'];
    $imgId = $_POST['imgId'];
    $sql = "INSERT INTO schema_name (name,id) 
    VALUES ('$imgName','$imgId')";
    if(!mysqli_query($con,$sql)) {
        echo 'Not Inserted';
    }
    else {
        echo 'Inserted';
    }
?>