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上传输图像数据

已编辑的代码

<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

<div class = "row">
  <% @photos.each do |photo| %>
    <div class = "col-sm-3"><%= image_tag photo.picture.ad.url %></div>
  <% end %>
</div>

<%= will_paginate @photos %> 


def index
  @photos = @user.photos.paginate(page: params[:page], per_page: 9)
end

希望这会有所帮助......

拖放event.dataTransfer.files为空

1 个答案: