AnswerBun.com

How to add a number to the picture php

Stack Overflow Asked by user13670828 on December 2, 2020

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:[email protected]&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?

Add your own answers!

Related Questions

Invalid shorthand property initializer

5  Asked on December 27, 2021 by pallab-ganguly

   

Drupal payment method getting access denied for admin

1  Asked on December 27, 2021 by vijayanand-premnath

   

How can I plot more 10k points using matplotlib?

1  Asked on December 27, 2021 by andkot

     

PHP; time conversion form distance and speed

2  Asked on December 27, 2021 by nway

   

Jest test with SpyOn

1  Asked on December 27, 2021 by user9855821

 

json.Decoding a TCP connection and logging the original data at the same time in Go

2  Asked on December 27, 2021 by mnv3akndilyweipfg0ocvwiuob

         

Check lists are equal whilst accounting for nulls

1  Asked on December 27, 2021

       

Not sure how to change the behavior of my CSS Grid

1  Asked on December 27, 2021 by m3hran

     

Fluentd how to get source from a file by executing a script

1  Asked on December 27, 2021 by snoogybunny

 

Var keyword in Java

5  Asked on December 27, 2021 by harold-ibouanga

   

shorten the string to the desired values

3  Asked on December 27, 2021

   

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir