-1

I am working on photo website.

I am using input "type = 'file' to upload images and its working fine.

I am using FileReader https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL to preview multiple images before uploading.

is it possible to attach input fields with each image while using above method?

Logo Designer
  • 29
  • 5
  • What do you mean by `input fields`? Others than the file input? – Mosh Feu Apr 11 '21 at 07:24
  • @MoshFeu input fields like image name, Image descriptions and etc. Please check my reply to Takbeer Ali khan's answer below – Logo Designer Apr 11 '21 at 09:40
  • Start with Takbeer's answer. Just add an input for each file in the input. You can get an idea of how to add the inputs [here](https://stackoverflow.com/a/14853880/863110) – Mosh Feu Apr 11 '21 at 15:06

1 Answers1

0
1) Make index.html

<html>
<head>
    <title>Javescript - How to preview multiple images before uplod</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <!-- Jquery CDN JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- custom JS -->
    <script src="custom.js"></script>
</head>
<body>
    <div class="container">
        <input type="file" multiple id="gallery-photo-add">
        <div class="col-md-12" class="gallery">
            
        </div>
    </div>
</body>
</html>


2) Make cutom.js

$(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');
    });
});
Takbeer Ali
  • 129
  • 7
  • I already able to to preview images and upload them to server. but I want to add each image name, descriptions and other inputs during preview phase and then send them to server db. – Logo Designer Apr 11 '21 at 09:43