Javascript；从数组中的文件夹保存图像答案

【问题标题】：Javascript; Saving images from folder in arrayJavascript；从数组中的文件夹保存图像
【发布时间】：2013-10-19 09:13:08
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript arrays image path

【解决方案1】：

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

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

一样简单

console.log("logging statement");

在您的 Javascript 代码中。

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

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

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

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

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

【讨论】：

【解决方案2】：

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

基本上做到以下几点：

在 HTML 页面中添加图片。
在数组document.images 中获取您在JS 中的所有图像。
循环图像数组以便仅找到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">

【讨论】：