Drag and Drop event.dataTransfer.files爲空

Question

我試圖收集數據，每次圖像被放在div內。我的服務器甚至沒有收到空的數據。我只需要顯示圖像名稱「green-glass-arrow.png」。你可以在「console」中看到它 我在做什麼錯了？請幫忙！ 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); 
} 

最終結果。上拖放到MySql使用的javascrip AJAX傳送圖像數據到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> 

希望這有助於...