使用 javascript 显示具有特定名称的图像

Question

我在文件夹“../../images”中有一些图片

图片名称我给例子

101_2018_1_1.jpg

101_2018_1_2.jpg

101_2018_1_3.jpg

101 在 var1 上

2018 年是 id 年

并且 1 在 var3 上

最后一个是自增

如何根据我用 javascript 选择的组合框调用所有具有特定名称的图像并在我的页面上显示图像？

这里是我的表单示例

<form>
<select name="var1" id="var1" >
 <option value='101'>id 1</option>
 <option value='102'>id 2</option>
 <option value='103'>id 3</option>
</select>

<input type="text"  id="year" name="year" value="<?php echo date('Y'); ?>">

<select name="var3" id="var3" >
 <option value='1'>case 1</option>
 <option value='2'>case 2</option>
 <option value='3'>case 3</option>
 <option value='4'>case 4</option>
</select>

<button  type="submit" name="search">search</button>
</form>

Answer 1

使用 jQuery 你可以这样做：

$(document).ready(function() {
  $("form").submit(function(e) {
    e.preventDefault();

    var URL = "www.example.com/image/";

    //Get the values of form element 
    var var1 = $("#var1").val();
    var year = $("#year").val();
    var var3 = $("#var3").val();

    //Check Up to 10 increments
    for (i = 1; i <= 10; i++) {
      var img = URL + var1 + "_" + year + "_" + var3 + "_" + i + ".jpg";
      getImage(img);
    }

    return false;
  });
});

/*
  Check if image exist and add it.
  If not, just console
*/
function getImage(image_url) {
  $.get(image_url)
    .done(function() {
      // Image does exist - append on #image-container container
      $("#image-container").append('<img src="' + image_url + '">');
    }).fail(function() {
      // Image doesn't exist - do nothing.
      console.log(image_url + " does not exist.");
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <select name="var1" id="var1">
    <option value='101'>id 1</option>
    <option value='102'>id 2</option>
    <option value='103'>id 3</option>
   </select>

  <input type="text" id="year" name="year" value="2018">

  <select name="var3" id="var3">
    <option value='1'>case 1</option>
    <option value='2'>case 2</option>
    <option value='3'>case 3</option>
    <option value='4'>case 4</option>
  </select>

  <div id="image-container"> </div>

  <button type="submit" name="search">search</button>
</form>

Answer 2

如果我没理解错的话，你会这样做：

var imgUrl, counter = 3;
document.getElementById('search').addEventListener('click', function() {
  imgUrl = "../../" + document.getElementById('var1').value + "_" + document.getElementById('year').value + "_" + document.getElementById('var3').value + "_";
  alert(imgUrl);
  for (var i = 0; i < counter; i++) {
    var img = document.createElement("IMG");
    var url = imgUrl + i.toString() + ".jpg"
    //img.setAttribute('src', );
    alert(url);
  }
});

<form>
  <select name="var1" id="var1">
    <option value='101'>id 1</option>
    <option value='102'>id 2</option>
    <option value='103'>id 3</option>
  </select>

  <input type="text" id="year" name="year" value="<?php echo date('Y'); ?>">

  <select name="var3" id="var3">
    <option value='1'>case 1</option>
    <option value='2'>case 2</option>
    <option value='3'>case 3</option>
    <option value='4'>case 4</option>
  </select>

  <input type="submit" name="search" id='search'>
</form>

这将为您提供图像 url，将 src 属性设置为该图像 url，然后将其附加到正文。

使用 javascript 显示具有特定名称的图像

show the image with specific named using javascript

javascript

php

arrays

imagesource