Javascript; 從陣列中的文件夾保存圖像

Question

我遇到的問題似乎很簡單，但是似乎找不到與我的問題有關的任何資源。 我想要做的是使用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中運行它，並清除了所有錯誤，但實際上什么也沒發生。 我不知道如何運行控制台日志來檢測是否已加載映像。 我很茫然，甚至跳到邏輯上。 在這一點上，我非常需要完成隨機化器，這讓我發瘋了。 非常感謝您可能提供的任何意見。

Answer 1

首先，您的代碼示例中有幾個錯誤。 #Gameboard沒有結束<div>標記，在哪里使用path ？

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

console.log("logging statement");

在您的Javascript代碼中。

現在是您真正的問題。 出現問題的原因是瀏覽器與計算機的基礎操作系統和文件系統的交互作用有限。 使用時

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

它是建立連接的瀏覽器，然后選擇要上傳的文件

根據您使用的瀏覽器類型及其與File API的兼容性，可以使用input標記並將Javascript函數綁定到Submit事件以執行所需的操作。

但是，將圖像保存在服務器中會變得越來越容易，然后您可以通過瀏覽器中的URL訪問這些圖像。 如果您打算為自己的計算機執行此操作，只需安裝Apache / MySQL / PHP堆棧並將數據保存在localhost文件夾中。

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

Javascript; 從陣列中的文件夾保存圖像

問題描述

2 個解決方案

解決方案1
0 2013-10-11 10:22:37

解決方案2
0 2016-06-20 20:39:48

Javascript; 從陣列中的文件夾保存圖像

問題描述

2 個解決方案

解決方案1 0 2013-10-11 10:22:37

解決方案2 0 2016-06-20 20:39:48

解決方案1
0 2013-10-11 10:22:37

解決方案2
0 2016-06-20 20:39:48