selecting pictures in html javascript jquery

Question

i create a form in asp.netcore mvc where i upload the pictures i want that when i hit choose button i select picuture or group of picture after that if i hit again the choose button i again select picture or group of picuture but it do not replace the pictures which i select before.

my html and javascript form

<div class="row">

                <input type="file" name="imge1" id="file" asp-for="imge1" class="hidden" multiple>
                <button type="button" class="btn btn-primary" id="filebutton"><span id="filetext">Select File</span></button>
                <div id="preview" style="column-gap: 25px;"></div>
            </div>
            <div id="image_preview"></div>
<script>
        $(document).ready(function () {
            $('#filebutton').click(function () {
                $('#file').click();
            });

            $('#file').change(function () {

                var name = $(this).val().split('\\').pop();
                var file = $(this)[0].files;
                if (name != '') {
                    if (file.length >= 2) {
                        $('#filetext').html(file.length + ' files ready to upload');
                    }
                    else {
                        $('#filetext').html(name);
                    }
                }
            });

            $('#file').on("change", previewImages);
        });

        function previewImages() {

            var $preview = $('#preview').empty();
            if (this.files) $.each(this.files, readAndPreview);

            function readAndPreview(i, file) {

                if (!/\.(jpe?g|png|gif)$/i.test(file.name)) {
                    return alert(file.name + " is not an image");
                } // else...

                var reader = new FileReader();

                $(reader).on("load", function () {
                    $preview.append($("<img>", { src: this.result, height: 80, }));
                });

                reader.readAsDataURL(file);

            }

        }
    </script>

So you don't want to empty the previous displayed pictures or ? — Carsten Løvbo Andersen, Nov 02 '22 at 06:36
it works but when i post it just take those picture which i select after first select means it replace the previous selected picture the previous pictures not added in imge1 — Creative Things, Nov 02 '22 at 06:59

score 1 · Accepted Answer · answered Nov 03 '22 at 06:32

1

You mentioned that,

it works but when i post it just take those picture which i select after first select means it replace the previous selected picture the previous pictures not added in imge1

It looks like this is the expected behavior.

When you select the images for the first time, it will show you the list of files when you hover over the File Input.

When you again click the button to add new images, the File Input control will remove the previous list of images and show you the latest selected images.

This is how File Input control works.

Further, due to security reasons, it is not possible to append the files to the previously selected files of the File Input using JS code.

answered Nov 03 '22 at 06:32

Deepak-MSFT

10,379
1
12
19

So any other solution for this? – Creative Things Nov 03 '22 at 06:47
I would suggest you refer to the suggestions mentioned in these 2 threads may give some hints to you. [thread-1](https://stackoverflow.com/questions/1696877/how-to-set-a-value-to-a-file-input-in-html), [thread-2](https://stackoverflow.com/questions/6021526/programmatically-set-the-value-of-a-type-file-input-html-element). – Deepak-MSFT Nov 03 '22 at 06:57

selecting pictures in html javascript jquery

1 Answers1