每次将图像放入 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 到 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';
}
?>
最佳答案
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>
希望这有帮助...
关于javascript - 拖放 event.dataTransfer.files 为空,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36635662/