javascript - 拖放 event.dataTransfer.files 为空

Question

每次将图像放入 div 时，我都会尝试收集数据。我的服务器收到空数据，甚至没有收到任何东西。我只需要显示图像名称“green-glass-arrow.png”。您可以在“控制台”中看到它我究竟做错了什么？请帮忙! You can see example here

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 将图像数据拖放到 MySql 到 PHP

编辑代码

<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';
    }
?>

Answer 1

codepen.io/TShah/pen/aNYMaX

        <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>

希望这有助于...