0

我遇到的问题看起来很简单，但我似乎找不到任何与我的问题有关的资源。我想要做的是使用 Javascript 将 36 个图像从我的计算机内的一个文件夹中存储到一个数组中。以下是相关代码片段的缩短版本。

<!doctype html>
    <head>
      <style>
       div#GameBoard {
         position: absolute;
         top: 66px;
         left: 53px;
         display: block;
         margin: 10px;
         padding: 10px;
         border: ridge #7CFC00 15px;
         width: 1007px;
         height: 698px;
       }

       div#Flipper {
         display: block;
         position: relative;
         background-color: #000;
       }      
     <style>

     <script lang="javascript">
       var ImgArray = [[11-16][21-26][31-36][41-46][51-56][61-66]];
       // pseudocode, the first digit is for row, second digit is for column number. 
       //I've named the pictures accordingly within the folder as 11.png,12.png,21.png,
       //and within the array //as well.

       function OnClickCard(path)
       {
         path || path ='C:\Users\Jamal\Desktop\codefolder\memorygame\gameimages'

         document.getElementById("Flipper").img.src = ImgArray.splice(Math.floor(Math.random() * ImgArray.length)[ImgArray];
       }
    </script>
  <body>
    <div id="GameBoard">
        <div class="Tile" id="Flipper">
            <img name ="11" src="blue-glass-tile.png" onclick="OnClickCard()"/>
        </div>

  </body>
  </head>
</html>

所以我想要它做的是将 36 个图像保存在一个数组中的 'C:\Users\Jamal\Desktop\codefolder\memorygame\gameimages' 中，并拼接一个从 0-35 的随机索引以更改为图像源div，删除该索引，使其不会被使用两次。

实际发生的事情..没什么。我一直在 Firefox 中为开发者控制台运行它并清除了所有错误，但实际上什么也没发生。我不知道如何运行控制台日志以检测是否已加载图像。我很茫然，甚至跳过了逻辑。在这个时间点上，我迫切需要完成随机化程序，这让我发疯。我非常感谢您提供的任何意见。

4

2 回答 2

0

首先，您的代码示例中有几个错误。 #Gameboard没有结束<div>标签，在哪里path使用？

其次，运行控制台日志就像

console.log("logging statement");

在您的 Javascript 代码中。

现在问你真正的问题。您的问题的原因是浏览器与您机器的底层操作系统和文件系统的交互有限。当你使用

<input type = 'file' id = file_input' />

它是建立连接的浏览器，您选择要上传的文件

根据您拥有的浏览器类型及其与File API的兼容性，您可以使用 input 标签并将 Javascript 函数绑定到 submit 事件以执行您想要的操作。

但是，将图像放在服务器中会更好、更容易，然后您可以通过浏览器中的 URL 访问该服务器。如果您打算为自己的机器执行此操作，只需安装 Apache/MySQL/PHP 堆栈并将数据保存在 localhost 文件夹中。

于 2013-10-11T10:22:37.640 回答
0

下面是一个简单的方法，假设您对图像src路径而不是blob图像的内容感兴趣。我希望它可以为您指明正确的方向。

基本上做到以下几点：

  • 在您的 HTML 页面中添加您的图像。
  • 在数组中获取 JS 中的所有图像document.images。
  • 循环图像数组以便仅找到src路径。
  • 根据需要使用data数组。

var images = document.images,
    data = [];
for (var i = 0, len = images.length; i < len; i++) {
  data.push(images[i].src);
  console.log(data[i]);
}
// do whatever you want with array data
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">

<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%9710&w=150&h=200">

于 2016-06-20T20:39:48.810 回答