Javascript; Сохранение изображений из папки в массиве

У меня проблемы, которые казались достаточно простыми, но я просто не могу найти никаких ресурсов, относящихся к моему вопросу. Что я хочу сделать, это хранить 36 изображений из папки внутри моего компьютера, в массив с использованием Javascript. Ниже приведена сокращенная версия соответствующих фрагментов кода.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 \ Джамала \ Desktop \ codefolder \ memorygame \ gameimages» в массив, и сращивание случайный индекс от 0-35 чтобы изменить источник изображения в div, удалив этот индекс, чтобы он не использовался дважды.

Что на самом деле происходит .. это ничего. Я запускаю его в firefox для консоли разработчика и очистил все ошибки, но буквально ничего не происходит. Я не знаю, как запустить консольный журнал для обнаружения ошибки, если изображение было загружено. Я нахожусь в убытке и даже перешел к логике. В этот момент я отчаянно нуждаюсь в том, чтобы закончить рандомизатор, и это сводит меня с ума. Я бы очень признателен за любой вклад, который у вас есть.

источник

2013-10-11 Jonathan Jamal Rhys Prentice

Во-первых, у вас есть несколько ошибок в вашем примере кода. #Gameboard не имеет закрытия <div> тег, а где path б/у?

Во-вторых, запуск журнала консоли так же легко, как

console.log("logging statement");

в код Javascript.

Теперь для вашего реального вопроса. Причина ваших проблем заключается в том, что браузер имеет ограниченное взаимодействие с базовыми операционными и файловыми системами вашей машины. При использовании

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

своего браузера, что делает соединение и выбрать файлы, которые будут загружены

В зависимости от типа браузера есть и его совместимости с File API, вы можете использовать входной тег и привязать функцию Javascript к событию отправки, чтобы сделать то, что вы хотите.

Однако было бы лучше и проще иметь изображения на сервере, которые затем будут доступны через URL-адрес браузера. Если вы планируете сделать это для своей собственной машины, просто установите стек Apache/MySQL/PHP и сохраните данные в своей папке localhost.

источник

2013-10-11 10:22:37 Jason

Под упрощенным подходом, предполагающим, что вас интересует изображение 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-20 20:39:48 GibboK

Javascript; Сохранение изображений из папки в массиве

ответ

Смежные вопросы