拖放(事件)不会触发ajax POST

我有三个页面:test.php,script.js和main.php.

Main.php正在使用html5拖放以及来自script.js的简单ajax脚本,以便发布并激活test.php.(旁注,我希望main.php传递一个POST变量.经过几个小时的研究和一百次左右的测试和修改,我无法弄清楚为什么我无法获得触发帖子.任何建议都会非常感谢.这是我的代码:

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

  






"  ;
    }
    /* free result set */
    mysqli_free_result($result);
}
 mysqli_close($link);
 /////////////////////////////////////////////////////////////////////////////////
?>


"  ;
    }
    /* free result set */
    mysqli_free_result($result);
}
 mysqli_close($link);
?>


"  ;
    }
    /* free result set */
    mysqli_free_result($result);
}
 mysqli_close($link);
?>


"  ;
    }
    /* free result set */
    mysqli_free_result($result);
}
 mysqli_close($link);
?>


"  ;
    }
    /* free result set */
    mysqli_free_result($result);
}
 mysqli_close($link);
?>

Jia Jian Goi.. 6

在您的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"]方法参数.

', 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.

在您的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"]方法参数.

', 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.