Counter for number of forms

How can i make multiple images appear since currently whenever i click browse and upload, it always shows the picture at the same place. i was wondering if it is possible to make it so that each “browse” i click, the picture is shown beside the “browse button”. Further more is it possible to implement a add button so that when the “add button” is clicked, another “browse file ” will appear below it. And if its possible can i make a counter for the number of “browse files” that can be added. cause what i want to achieve is that i want the total number of “browse files” to be 15 only and once it hits 15 the “add button” will be disabled. So in this case i have 3 sections, i want the total number of “browse button” across all section to be only 15.
I am only allowed to use HTML, CSS and 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>


Source: javascript

Leave a Reply