Question

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

<!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中为开发者控制台运行它并清除了所有错误，但实际上没有任何反应。我不知道如何运行控制台日志以检测是否已加载图像。我很茫然，甚至已经跳过了逻辑。在这个时候我迫切需要完成随机发生器，这让我疯狂。我非常感谢您提出的任何意见。

Answer 1

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

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

一样简单

console.log("logging statement");

在您的Javascript代码中。

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

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

建立连接的浏览器，然后选择要上传的文件

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

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

Answer 2

下面是一种简单的方法，假设您对图像的src路径而非blob内容感兴趣。我希望它能指出你正确的方向。

基本上遵循：

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

＆＃13;

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

＆＃13;

<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">

＆＃13;

JavaScript的;从数组中的文件夹保存图像

2 个答案: