I am seeking assistance with JavaScript as it is not my strong suit, but I require it for my website. My goal is to be able to read the files that I select.
Below you can find the input form:
<form name="filUpload" action="" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" class="form-control" value="" placeholder="Name">
</div>
<div class="form-group">
<label for="Top">Top</label>
<input onchange="readURL(this, '#thumbnail-Top');" class="form-control-file" type="file" name="userfile">
</div>
<div class="form-group">
<label for="Bottom">Bottom</label>
<input onchange="readURL(this);" class="form-control-file" type="file" name="userfile">
</div>
<div class="form-group">
<label for="Left">Left</label>
<input onchange="readURL(this);" class="form-control-file" type="file" name="userfile">
</div>
<div class="form-group">
<label for="Right">Right</label>
<input onchange="readURL(this);" class="form-control-file" type="file" name="userfile">
</div>
<div class="input-group">
<input type="submit" style="" class="btn btn-success m-3" value="Submit" name="btn_type_send" />
</div>
</form>
Next, we have the section where the selected pictures are displayed. The "id="thumbnail-..." is referenced in the script below. There seems to be an issue within this script which I will elaborate on shortly.
<div class="">
<div class="card m-2">
<h4 class="card-header text-center">Images</h4>
<div class="d-flex">
<div class="flex-fill">
<h5 class="card-header">Top</h5>
<div class="card-body">
<img class="card-img text-center" alt="" id="thumbnail-Top" src="#" style=""/>
</div>
</div>
<div class="flex-fill">
<h5 class="card-header">Bottom</h5>
<div class="card-body">
<img class="card-img text-center" alt="" id="thumbnail-Bottom" src="#" style=""/>
</div>
</div>
...
</div>
</div>
</div>
Now comes the script part. I suspect that my challenge lies in selecting multiple IDs, which currently eludes me. I aim to pick one image for each category - "Top, Bottom, Left, Right". Additionally, I also wish to implement this functionality on another page with only three categories due to similar sides.
The #thumbnail refers to the specific ID mentioned earlier.
<script type="text/javascript">
function readURL(input, id) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(id).attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
Any examples or guidance would be greatly appreciated!