拖放（事件）不會觸發ajax POST

Question

我有三個頁面：test.php，script.js和main.php。

Main.php正在使用html5拖放以及來自script.js的簡單ajax腳本，以便發布並激活test.php。 （旁注，我希望main.php將<img id="s1" />作為POST變量傳遞。經過幾個小時的研究和大約一百次測試和修改，我無法弄清楚為什么我無法得到ondrop觸發帖子。非常感謝任何建議。這是我的代碼：

test.php（包含一個簡單的php腳本，加載時將通用記錄插入我的DB）

的script.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>

Answer 1

在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"]打印到method參數中。

<div id="1" ondrop="drop('<?php echo $row["sID"]; ?>', event)" ondragover="allowDrop(event)">

在PHP腳本上，您需要能夠接收POST ed文件。 一個例子如下所示。

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

拖放（事件）不會觸發ajax POST

問題描述

1 個解決方案

解決方案1
6 已采納 2015-12-16 02:35:17

拖放（事件）不會觸發ajax POST

問題描述

1 個解決方案

解決方案1 6 已采納 2015-12-16 02:35:17

解決方案1
6 已采納 2015-12-16 02:35:17