我有三个页面:test.php、script.js 和 main.php。
Main.php 使用 html5 拖放以及来自 script.js 的简单 ajax 脚本，以努力发布到并激活 test.php。 (旁注，我希望 main.php 将 <img id="s1" /> 作为 POST 变量传递。经过几个小时的研究和一百次左右的测试和修订后，我无法弄清楚为什么我无法通过 ondrop 触发帖子。任何建议将不胜感激。这是我的代码:
test.php(包含一个简单的 php 脚本，加载时会将通用记录插入我的数据库)
脚本.js
function drop(id, event) {
$.ajax({
url: "test.php",
type: "POST",
data: {
id: id,
event: event
},
success: function () {
console.log('great success');
return true
}
});
return false;
}
和main.php
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
<header class="main-header" role="banner"><center>
<img src="lampettalogo.jpg" height="90" width="400"alt="Banner Image"/></center>
</header>
<style>
#1 {width:auto;height:auto;padding:1px;border:1px solid #aaaaaa;}
#2 {width:auto;height:auto;padding:1px;border:1px solid #aaaaaa;}
#3 {width:auto;height:auto;padding:1px;border:1px solid #aaaaaa;}
#4 {width:auto;height:auto;padding:1px;border:1px solid #aaaaaa;overflow: auto;}
</style>
</head>
<body>
<div id="1" ondrop="drop(event)" ondragover="allowDrop(event)">
<?php
include "database_connection.php";
///////////////////////////////////////////////////////////////////////////////////////////////
/* check connection */
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
else
{
}
$query = "SELECT * FROM ss where currentZone = 1";
if ($result = mysqli_query($link, $query)) {
/* fetch associative array */
while ($row = mysqli_fetch_assoc($result)) {
echo "<img id='{$row["sID"]}' src='{$row["photoLink"]}.jpg' draggable='true' ondragstart='drag(event)' width='75' height='75'>" ;
}
/* free result set */
mysqli_free_result($result);
}
mysqli_close($link);
/////////////////////////////////////////////////////////////////////////////////
?>
</div>
<div id="2" ondrop="drop(event)" ondragover="allowDrop(event)">
<?php
include "database_connection.php";
$query = "SELECT * FROM ss where currentZone = 2";
if ($result = mysqli_query($link, $query)) {
/* fetch associative array */
while ($row = mysqli_fetch_assoc($result)) {
echo "<img id='{$row["sID"]}' src='{$row["photoLink"]}.jpg' draggable='true' ondragstart='drag(event)' ondrop='drop(event)' width='75' height='75'>" ;
}
/* free result set */
mysqli_free_result($result);
}
mysqli_close($link);
?>
</div>
<div id="3" ondrop="drop(event)" ondragover="allowDrop(event)">
<?php
include "database_connection.php";
$query = "SELECT * FROM ss where currentZone = 3";
if ($result = mysqli_query($link, $query)) {
/* fetch associative array */
while ($row = mysqli_fetch_assoc($result)) {
echo "<img id='{$row["sID"]}' src='{$row["photoLink"]}.jpg' draggable='true' ondragstart='drag(event)' width='75' height='75'>" ;
}
/* free result set */
mysqli_free_result($result);
}
mysqli_close($link);
?>
</div>
<div id="4" ondrop="drop(event)" ondragover="allowDrop(event)">
<?php
include "database_connection.php";
$query = "SELECT * FROM ss where currentZone = 4";
if ($result = mysqli_query($link, $query)) {
/* fetch associative array */
while ($row = mysqli_fetch_assoc($result)) {
echo "<img id='{$row["sID"]}' src='{$row["photoLink"]}.jpg' draggable='true' ondragstart='drag(event)' width='75' height='75'>" ;
}
/* free result set */
mysqli_free_result($result);
}
mysqli_close($link);
?>
</div>
<div id="4" ondrop="drop(event)" ondragover="allowDrop(event)">
<?php
include "database_connection.php";
$query = "SELECT * FROM ss where currentZone = 0";
if ($result = mysqli_query($link, $query)) {
/* fetch associative array */
while ($row = mysqli_fetch_assoc($result)) {
echo "<img id='{$row["sID"]}' src='{$row["photoLink"]}.jpg' draggable='true' ondragstart='drag(event)' width='75' height='75'>" ;
}
/* free result set */
mysqli_free_result($result);
}
mysqli_close($link);
?>
</div>
</body>
</html>
最佳答案
在您的drop(id, e) 方法中，除了您的allowDrop 方法之外，您还可以考虑以下内容。使用 FileReader 类读取您的文件。
function drop(id, e) {
if (e.dataTransfer && e.dataTransfer.files.length != 0) {
var file = e.dataTransfer.files[0], // Only the first file.
reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (event) {
console.log(file.name);
$.ajax({
url: "test.php",
type: "POST",
data: {
id: id,
fileName: file.name, // Your file name.
file: event.target.result // Your file.
},
success: function () {
console.log('great success');
return true
}
});
};
}
}
在您的 HTML 中，您还需要在 id 中传递一个值。例如，您可以执行以下操作以将 $row["sID"] 打印到方法参数中。
<div id="1" ondrop="drop('<?php echo $row["sID"]; ?>', event)" ondragover="allowDrop(event)">
在您的 PHP 脚本中，您需要能够接收 POSTed 文件。示例如下所示。
$data = $_POST['file'];
$fileName = $_POST['fileName'];
$id = $_POST['id'];
$serverFile = $fileName . "-" . time(); // Appends timestamp so that files of the same name wouldn't be overwritten.
$fp = fopen('/uploads/' . $serverFile, 'w');
fwrite($fp, $data);
fclose($fp);
$returnData = array( "serverFile" => $serverFile );
echo json_encode($returnData);
查看此 plunker举个例子。将文件拖放到 div 中，然后查看控制台日志。
编辑
了解您想要拖放元素。
下面是更新的plunker .
关于javascript - 拖放(事件)不触发ajax POST，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34302647/