I have a webpage where user can upload as many image they like. When the user upload the image it show those image on the website (so user know what they are uploading) but, it should has a number "next to" image. This should be before the user submit the images. As I have a description box (after the image upload text I removed from this code though, but please assume its just a textarea after imageupload tags), so user can tell image "1" means this or that etc. How can I add those numbers to identify the image?
How to show the number next to image when the user upload the images, so the description user write such as "picture 1 means that, picture 2 means that etc" will make sense to users.
I am using php, bootstrap, javascript, html, css for it.
My code:
<?php require "navigationbar.php"; ?>
<html>
<head>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="login-container" >
<form action="./backend/Backend.php" method="post">
</div>
<div class="form-group row">
<div class="col-sm-10">
<input type="text" class="form-control" >
</div>
</div>
<div class="form-group row">
<div class="col-sm-10" >
<input type="file" multiple id="gallery-photo-add" class="btn btn-primary btn-sm float-left" >
<div class="gallery"></div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary" >Submit</button>
</div>
</div>
</form>
</div>
<script>
$(function() {
// Multiple images preview in browser
var imagesPreview = function(input, placeToInsertImagePreview) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('#gallery-photo-add').on('change', function() {
imagesPreview(this, 'div.gallery');
});
});
</script>
</body>
</html>
How can I add number next to images? If any other detail is needed please let me know. I can provide more code or information related to it. Thanks.
I found a similar question: Adding number label on top of an image
But this one puts the number next to image not while uploading the image.But, that's what I am looking for as in the above question they have a green box with number next to image. For my question I want it to display after user selects image and it shows on the website but "with" those numbers. Can anyone reckon something?
