表格数量的计数器

Question

当我点击浏览和上传时，如何显示多个图像，它总是在同一个地方显示图片。我想知道是否有可能使每个“浏览”我点击，图片显示在“浏览按钮”旁边。此外，还可以实现添加按钮，以便在单击“添加按钮”时，其下方将显示另一个“浏览文件”。如果可能，我可以为可以添加的“浏览文件”的数量制作一个计数器。因为我想要实现的是我希望“浏览文件”的总数仅为15，一旦达到15，“添加按钮”将被禁用。所以在这种情况下我有3个部分，我希望所有部分的“浏览按钮”总数只有15个。 我只允许使用HTML，CSS和Javascript

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#target')
        .attr('src', e.target.result)
        .width(150)
        .height(200);
    };

    reader.readAsDataURL(input.files[0]);
  }
}

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<fieldset>
  <legend>Section1</legend>
  <input type='file' onchange="readURL(this);" />
  <img id="target" src="#" alt="your image" />
  <br>
  <input type='file' onchange="readURL(this);" />
  <img id="target" src="#" alt="your image" />
  <br>
  <input type='file' onchange="readURL(this);" />
  <img id="target" src="#" alt="your image" />
  <button>Add</button>
</fieldset>
<fieldset>
  <legend>Section2</legend>
  <input type='file' onchange="readURL(this);" />
  <img id="target" src="#" alt="your image" />
  <br>
  <input type='file' onchange="readURL(this);" />
  <img id="target" src="#" alt="your image" />
  <br>
  <input type='file' onchange="readURL(this);" />
  <img id="target" src="#" alt="your image" />
  <button>Add</button>
</fieldset>
<fieldset>
  <legend>Section3</legend>
  <input type='file' onchange="readURL(this);" />
  <img id="target" src="#" alt="your image" />
  <br>
  <input type='file' onchange="readURL(this);" />
  <img id="target" src="#" alt="your image" />
  <br>
  <input type='file' onchange="readURL(this);" />
  <img id="target" src="#" alt="your image" />
  <button>Add</button>
</fieldset>

Answer 1

问题是因为您在所有表单元素上都有重复的id属性。所有元素的id属性在document的上下文中必须是唯一的。您可以通过使用类来解决此问题，并使用DOM遍历来查找与已更改的img相关的input。值得注意的是，您应该使用JS来连接事件而不是过时的onX事件属性。试试这个。

＆＃13;

＆＃13;

$('fieldset input').change(function() {
  if (this.files && this.files[0]) {
    var $target = $(this).next('.target');
    var reader = new FileReader();
    reader.onload = function(e) {
      $target.attr('src', e.target.result).width(150).height(200);
    };
    reader.readAsDataURL(this.files[0]);
  }
});

＆＃13;

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>

<fieldset>
  <legend>Section1</legend>
  <input type="file" />
  <img class="target" src="#" alt="your image" />
  <br>
  <input type="file" />
  <img class="target" src="#" alt="your image" />
  <br>
  <input type="file" />
  <img class="target" src="#" alt="your image" />
  <button>Add</button>
</fieldset>

<fieldset>
  <legend>Section2</legend>
  <input type="file" />
  <img class="target" src="#" alt="your image" />
  <br>
  <input type="file" />
  <img class="target" src="#" alt="your image" />
  <br>
  <input type="file" />
  <img class="target" src="#" alt="your image" />
  <button>Add</button>
</fieldset>

<fieldset>
  <legend>Section3</legend>
  <input type="file" />
  <img class="target" src="#" alt="your image" />
  <br>
  <input type="file" />
  <img class="target" src="#" alt="your image" />
  <br>
  <input type="file" />
  <img class="target" src="#" alt="your image" />
  <button>Add</button>
</fieldset>

＆＃13;

＆＃13;

＆＃13;