2017-02-13 4 views
-4
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title></title> 
</head> 
<body class="layouts" id="www-cssplay-co-uk"> 
    <div id="header"> 
     <h1>Demo</h1> 
     <div id="menu"> 
      <ul class="main"></ul> 
     </div> 
    </div> 
    <div id="wrapper"> 
     <input checked="checked" id="pic1" name="large" type="radio"> 
     <input id="pic2" name="large" type="radio"> 
     <input id="pic3" name="large" type="radio"> 
     <input id="pic4" name="large" type="radio"> 
     <input id="pic5" name="large" type="radio"> 
     <input id="pic6" name="large" type="radio"> 
     <input id="pic7" name="large" type="radio"> 
     <input id="pic8" name="large" type="radio"> 
     <input id="pic9" name="large" type="radio"> 
     <input id="pic10" name="large" type="radio"> 
     <input id="pic11" name="large" type="radio"> 
     <input id="pic12" name="large" type="radio"> 
     <input id="pic13" name="large" type="radio"> 
     <input id="pic14" name="large" type="radio"> 
     <input id="pic15" name="large" type="radio"> 
     <input id="pic16" name="large" type="radio"> 
     <input id="pic17" name="large" type="radio"> 
     <input id="pic18" name="large" type="radio"> 
     <input id="pic19" name="large" type="radio"> 
     <input id="pic20" name="large" type="radio"> 
     <input id="pic21" name="large" type="radio"> 
     <input id="pic22" name="large" type="radio"> 
     <div id="main"> 
      <div id="main-scroll"> 
       <div class="main-inner"><img alt="" src="images/1.jpg"></div> 
       <div class="main-inner"><img alt="" src="images/2.jpg"></div> 
       <div class="main-inner"><img alt="" src="images/3.jpg"></div> 
       <div class="pad-bottom"></div> 
      </div> 
     </div><!-- 
     --> 
     <div id="info"> 
      <div id="info-scroll"> 
       <div class="pad-top"></div> 
       <div class="info-inner"> 
        <label for="pic1"> 
        <img alt="" src="images/1.jpg"></label> 
       </div> 
       <div class="info-inner"> 
        <label for="pic2"><img alt="" src="images/2.jpg"></label> 
       </div> 
       <div class="info-inner"> 
        <label for="pic3"><img alt="" src="images/3.jpg"></label> 
       </div> 
       <div class="pad-bottom"></div> 
      </div> 
     </div> 
    </div> 
    <div id="footer"> 
     <ul class="sub"></ul> 
    </div> 
</body> 
</html> 

Папка изображений размещена на стороне сервера. В настоящее время он имеет 3 изображения. Я хочу написать php-скрипт, который делает 2 вещи, когда новое изображение добавляется в папку. 1-й, он автоматически создает тег «<div class="main-inner"><img alt="" src="images/x.jpg"></div>» (где «x.jpg» будет новым изображением) в области «главный-внутренний». 2nd, добавляет тег <div class="info-inner"><label for="pic3"><img alt="" src="images/x.jpg"></label></div> в области «info-inner».Как я могу использовать PHP или любой другой скрипт на стороне сервера для создания автоматических html-тегов всякий раз, когда новое изображение добавляется в папку с сохраненным изображением сервера.

+0

Пожалуйста обеспечивают [mcve]. –

+0

Похоже, вы должны динамически генерировать divs на основе содержимого папки с изображениями при загрузке страницы, а не иметь отдельные скрипты, которые изменяют HTML при добавлении изображения. – BizzyBob

ответ

1

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

Нечто подобное должно вам начать работу:

<?php 

$folder = 'images'; 

$images = scandir($folder); 
$images = array_diff($images, array('..', '.')); // remove '..' and '.' from array 

foreach ($images as $i => $image) { 
    $id = 'pic' . $i; 
    $divHTML .= "<div class=\"main-inner\"><img src=\"$folder/$image\"></div>"; 
    $labelHTML .= "<div class=\"info-inner\"><label for=\"$id\"><img src=\"$folder/$image\"></label></div>"; 
} 
?> 
<html> 
<?php echo $divHTML ?> 
<?php echo $labelHTML ?> 
</html> 
1

Сначала создайте каталог в какую-нибудь папку на сервере Примечание: Вы можете добавить множество изображений и этот код будет показывать все изображения, которые наклеены на этой папке.

<?php 
 
$directory = "C:/wamp/www/Test/images/"; 
 
$images = glob($directory . "*.jpg"); 
 
$count = count($images)+1; 
 
?> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title></title> 
 
</head> 
 
<body class="layouts" id="www-cssplay-co-uk"> 
 
    <div id="header"> 
 
     <h1>Demo</h1> 
 
     <div id="menu"> 
 
      <ul class="main"></ul> 
 
     </div> 
 
    </div> 
 
    <div id="wrapper"> 
 
\t <?php foreach($images as $key=>$value) 
 
\t { 
 
\t \t $whatIWant = substr($value, strpos($value, "C:/wamp/www/") + 12); 
 
\t \t $count = $key+1; 
 
\t \t $cnt = '<input id="pic'.$count.'" name="large" type="radio">'; 
 
\t \t echo $cnt; 
 
\t ?> 
 
     <div id="main"> 
 
      <div id="main-scroll"> 
 
<?php 
 
echo "<div class='main-inner'><img src='http://localhost/".$whatIWant."' alt='' heught=50px width=50px></div>"; 
 
} ?> 
 

 
    </div> 
 
    <div id="footer"> 
 
     <ul class="sub"></ul> 
 
    </div> 
 
</body> 
 
</html>