javascript - 如何使用 javascript 控制 block 数量的呈现

Question

遇到了这个问题，希望有人可以帮助我。

现在我有了这个 html 脚本，允许用户输入图像的标题和说明文字。

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>

我想根据上传的图像数量来控制要显示的这些 block 的数量。

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;
}

谢谢stackoverflowers~

Answer 1

有很多框架可用于此。

您可能对 jQuery File Upload Demo 感兴趣.

这篇文章也与您的问题相关。 How to upload multiple files using one file input element