Question

语言（php，html，javascript）在这里并不重要，但我正在寻找一种解决方案，从键盘获取用户输入并通过目录中的图像前进。显示图像后，用户将按下一个键，将输入保存到服务器上的文件中。

文件在同一目录中都是.pngs，因此脚本会先知道要显示哪些图像。所以基本上：

1）页面在pageload上显示数组中的图像

2）用户根据显示的图像按键

3）该输入被保存到服务器上的文本文件

4）加载下一个图像并重复该过程直到图像阵列完成

这是我到目前为止的.php代码。我能够捕获键盘输入，但我似乎无法显示图像或正确的$ post代码将键盘输入保存到文件。

<?php
$dir = getcwd()."/";
$fileType = ".png";
$width = "663";
$height = "733";
$folder = basename($dir);
$filelist = glob("$dir*$fileType");
?>
<!DOCTYPE html>
<script>
document.onkeydown = function(event) {
var key_press = String.fromCharCode(event.keyCode);
var key_code = event.keyCode;
document.getElementById('kp').innerHTML = key_press;
document.getElementById('kc').innerHTML = key_code;
var status = document.getElementById('status');
status.innerHTML = "DOWN Event Fired For : "+key_press;
if(key_press == "Y"){
    document.body.style.background = "lime";
} else if(key_press == "N") {
    document.body.style.background = "red";
} else if(key_press == "M") {
    document.body.style.background = "yellow";
}
}
document.onkeyup = function(event){
var key_press = String.fromCharCode(event.keyCode);
var status = document.getElementById('status');
status.innerHTML = "UP Event Fired For : "+key_press;
document.body.style.background = "white";
}
</script>
<h2>Capture Response from Keyboard</h2>
<h3>onkeydown - onkeyup</h3>
Key Pressed : <span id="kp"></span>
<br />
Key Code : <span id="kc"></span>
<p id="status">Keyboard Event Status</p>

Answer 1

你走了。我已经在评论中解释了在此过程中所做的工作。

正如我所说，你需要对从服务器检索的数据做些什么。

<?php
  //This truncates the document when the page is refreshed.
  fopen("saved_chars.txt", "w+");

  //Get the images in the same folder as this script
  $dir = getcwd()."/";
  $fileType = ".png";
  $width = "663";
  $height = "733";
  $folder = basename($dir);
  $filelist = glob("$dir*$fileType", GLOB_NOESCAPE);

  //Because glob() returns absolute filepaths on the server, we need
  //to replace the current directory with an empty string, so we
  //are left with the image filepaths, relative to the webpage's location.
  $n_filelist = array();
  foreach($filelist as $filename){
    $filename = str_replace($dir,"",$filename);
    array_push($n_filelist,$filename);
  }
  $filelist = $n_filelist;
?>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <h2>Capture Response from Keyboard</h2>
  <h3>onkeydown - onkeyup</h3>
  <img src="" id="myImage"></img><br/><br/>
  <span>Key Pressed : <span id="kp"></span>
  <br />
  <span>Key Code : <span id="kc"></span>
  <p id="status">Keyboard Event Status</p>
</body>
<script>

  //here we are transforming the php $filelist array into a javascript array
  //by using the function `json_encode`
  //this must be done so as javascript is processed seperatly (on the client) to the php (which is done on the server).
  var files = <?php echo json_encode($filelist); ?>;

  var cIndex = 0;

  function displayNextImage(files){
    //here we check if the cIndex (current index) is less than the number of files. if it is, we can safely display the next image, and increment cIndex.
    if(cIndex < files.length){
      displayImage(files[cIndex++]);
    }
  }

  var isSaving = false;

  function saveKeyToServer(key){
    //here we send a "POST" request to out other script, savechar.php
    //savechar.php will simply write the pressed character into a file
    //we use a boolean value, isSaving, to track if a request is currently
    //in progress. This protects up from users spamming key presses before the new image loads.
    if(isSaving == false){
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
           displayNextImage(files);
           //once the request has been resolved and the new image displayed,
           //we can safely process user input again
           isSaving = false;
        }
      }; 
      isSaving = true;
      xhttp.open("POST", "savechar.php", true);
      xhttp.send(JSON.stringify({"pressed" : key}));
    }
  }

  function displayImage(imageName){
    document.getElementById("myImage").src=imageName;
  }

  document.onkeydown = function(event) {
    var key_press = String.fromCharCode(event.keyCode);
    var key_code = event.keyCode;
    document.getElementById('kp').innerHTML = key_press;
    document.getElementById('kc').innerHTML = key_code;
    var status = document.getElementById('status');
    status.innerHTML = "DOWN Event Fired For : " + key_press;
    if(key_press == "Y"){
        document.body.style.background = "lime";
        saveKeyToServer(key_press);
    } else if(key_press == "N") {
        document.body.style.background = "red";
        saveKeyToServer(key_press);
    } else if(key_press == "M") {
        document.body.style.background = "yellow";
        saveKeyToServer(key_press);
    }
  }

  document.onkeyup = function(event){
    var key_press = String.fromCharCode(event.keyCode);
    var status = document.getElementById('status');
    status.innerHTML = "UP Event Fired For : "+key_press;
    document.body.style.background = "white";
  }

  //we call this here, so that the first image is displayed
  displayNextImage(files)

</script>
</html>

savechar.php只需写入文件即可。它应与上述文件位于同一目录中（以及图像）。

<?php
  $pressed_key = json_decode(file_get_contents("php://input"),true)["pressed"];
  $fh = fopen("saved_chars.txt","a");
  fwrite($fh, $pressed_key);
  fclose($fh);
?>

繁荣，假设您的服务器上设置了正确的文件权限，这应该是好的。

在键盘输入上显示图像并将输入保存到文件

1 个答案: