How do I control the presentation of number of blocks by using javascript

Question

encountered this problem and hope someone could help me out here.

Now I have this html script that allows the user to input title and caption for the images.

HTML:

<form method="post" action="" enctype="multipart/form-data">
 <p>
    <input type="checkbox" name="allow_upload">
    <label for="upload_new">Upload Images</label>
 </p>
 <p>
     <label for="image_title">Title: </label>
     <input type="text" name="image_title">
 </p>
 <p>
     <label for="image_caption">Caption: </label>
     <input type="text" name="image_caption" id="image_caption">
 </p>
</form>

And I want to control the number of these blocks to be displayed base on the number of images uploaded.

JAVASCRIPT:

var cbox = document.getElementById('allow_upload');
cbox.style.display = 'block';
var uploadImage = document.getElementById('upload_new');
uploadImage.onclick = function () {
    var image_id = document.getElementById('image_id');
    var image = document.getElementById('image');
    var caption = document.getElementById('caption');
    var sel = uploadImage.checked;
    image_id.disabled = sel;
    image.parentNode.style.display = sel ? 'block' : 'none';
    caption.parentNode.style.display = sel ? 'block' : 'none';
    image.disabled = !sel;
    caption.disabled = !sel;
}

Thank u stackoverflowers~

Answer 1

There are quite a lot of frameworks available for this.

You might be interested in the jQuery File Upload Demo.

This post is also related to your question. How to upload multiple files using one file input element